/* Website Demos page only: the 21 sample websites. Loaded by website-demos.html after styles.css. */
@keyframes nl-pulse {
  0%, 100% {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.12);
  }
}
@keyframes jm-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes pb-ticker {
  to {
    transform: translateX(-50%);
  }
}
@keyframes gg-ticker {
  to {
    transform: translateX(-50%);
  }
}
@keyframes sl-marquee {
  to {
    transform: translateX(-50%);
  }
}


/* ============================================================
   Website Demos (website-demos.html)
   Ported from the QOW reference project.
   ============================================================ */
/* Jewelry demo — final layout audit */
.demo-hub-page .demo-site--jewelry {
  --jewel-ink: #211d19;
  --jewel-paper: #f1eee7;
  --jewel-line: rgba(33, 29, 25, 0.24);
  --jewel-radius: 8px;
  background: var(--jewel-paper);
  color: var(--jewel-ink);
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--jewelry .jewel-site {
  overflow: visible;
  background: var(--jewel-paper);
}

.demo-hub-page .demo-site--jewelry h2,
.demo-hub-page .demo-site--jewelry h3,
.demo-hub-page .demo-site--jewelry .jewel-products article > div p,
.demo-hub-page .demo-site--jewelry .jewel-process__steps article span,
.demo-hub-page .demo-site--jewelry .jewel-local__content strong,
.demo-hub-page .demo-site--jewelry .jewel-footer strong {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--jewelry h2,
.demo-hub-page .demo-site--jewelry h3 {
  max-width: none;
  font-size: clamp(36px, 4vw, 48px) !important;
  line-height: 1.05 !important;
}

.demo-hub-page .demo-site--jewelry img,
.demo-hub-page .demo-site--jewelry figure,
.demo-hub-page .demo-site--jewelry article,
.demo-hub-page .demo-site--jewelry button,
.demo-hub-page .demo-site--jewelry a {
  border-radius: var(--jewel-radius);
}

.demo-hub-page .demo-site--jewelry .jewel-site section:not(.jewel-hero):not(.jewel-final) {
  box-sizing: border-box;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 60px !important;
  overflow: visible !important;
}

.demo-hub-page .demo-site--jewelry .jewel-site section > * {
  box-sizing: border-box;
}

.demo-hub-page .demo-site--jewelry .jewel-nav {
  min-height: 76px;
  padding: 0 60px;
}

.demo-hub-page .demo-site--jewelry .jewel-nav button,
.demo-hub-page .demo-site--jewelry .jewel-nav a,
.demo-hub-page .demo-site--jewelry .jewel-site section a,
.demo-hub-page .demo-site--jewelry .jewel-site section button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: var(--jewel-radius);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 40px;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--jewelry .jewel-nav nav a,
.demo-hub-page .demo-site--jewelry .jewel-nav__tools button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  line-height: 1.2;
}

.demo-hub-page .demo-site--jewelry .jewel-nav__brand {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 26px;
  line-height: 1;
}

.demo-hub-page .demo-site--jewelry .jewel-hero {
  position: relative;
  display: flex;
  min-height: 0 !important;
  height: 620px !important;
  align-items: center;
  color: #fff;
}

.demo-hub-page .demo-site--jewelry .jewel-hero > figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

.demo-hub-page .demo-site--jewelry .jewel-hero > figure img {
  border-radius: 0;
}

.demo-hub-page .demo-site--jewelry .jewel-hero__copy {
  position: relative;
  z-index: 1;
  width: 62%;
  min-height: 0;
  padding: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-hero__copy h2 {
  margin: 18px 0;
}

.demo-hub-page .demo-site--jewelry .jewel-hero__copy > span {
  width: 100%;
  max-width: none;
  font-size: 18px;
  line-height: 1.55;
}

.demo-hub-page .demo-site--jewelry .jewel-hero__copy > div {
  gap: 12px;
  margin-top: 28px;
}

.demo-hub-page .demo-site--jewelry .jewel-hero__copy > div a {
  min-height: 44px;
  padding: 0 18px;
  line-height: 42px;
}

.demo-hub-page .demo-site--jewelry .jewel-hero > small {
  right: 60px;
  bottom: 60px;
}

.demo-hub-page .demo-site--jewelry .jewel-intro {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__lead {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__lead > p,
.demo-hub-page .demo-site--jewelry .jewel-heading > div > p {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__lead h3 {
  width: 100%;
  margin: 0;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__lead > span {
  width: 100%;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.55;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes {
  display: flex;
  width: 100%;
  gap: 16px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes article {
  display: flex;
  width: calc(33.333% - 11px);
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--jewel-line);
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes span {
  line-height: 1.5;
}

.demo-hub-page .demo-site--jewelry .jewel-heading {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 40px;
  margin: 0 0 36px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-heading > div {
  width: calc(62% - 20px);
}

.demo-hub-page .demo-site--jewelry .jewel-heading h3 {
  width: 100%;
  margin: 0;
}

.demo-hub-page .demo-site--jewelry .jewel-heading > p {
  width: calc(38% - 20px);
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.55;
  text-transform: none;
}

.demo-hub-page .demo-site--jewelry .jewel-shop {
  background: #e3dfd6;
}

.demo-hub-page .demo-site--jewelry .jewel-filters {
  gap: 8px;
  margin: 0 0 20px;
}

.demo-hub-page .demo-site--jewelry .jewel-filters button {
  min-height: 38px;
  padding: 0 14px;
  line-height: 36px;
}

.demo-hub-page .demo-site--jewelry .jewel-products {
  display: flex;
  flex-wrap: wrap;
  gap: 16px !important;
  border: 0;
}

.demo-hub-page .demo-site--jewelry .jewel-products article {
  width: calc(33.333% - 11px);
  padding: 14px;
  border: 1px solid var(--jewel-line);
  background: var(--jewel-paper);
}

.demo-hub-page .demo-site--jewelry .jewel-products article figure {
  width: 100%;
  height: 250px;
  aspect-ratio: auto;
}

.demo-hub-page .demo-site--jewelry .jewel-products article > div {
  min-height: 92px;
  padding: 16px 0;
}

.demo-hub-page .demo-site--jewelry .jewel-products article > div p {
  font-size: 24px;
}

.demo-hub-page .demo-site--jewelry .jewel-products article > button {
  width: 100%;
  min-height: 42px;
  line-height: 40px;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial {
  display: flex;
  min-height: 0 !important;
  align-items: stretch;
  gap: 20px !important;
  background: #30251f;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial figure,
.demo-hub-page .demo-site--jewelry .jewel-editorial__copy {
  height: 390px;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial__portrait {
  width: calc(40% - 10px);
}

.demo-hub-page .demo-site--jewelry .jewel-editorial__copy {
  display: flex;
  width: calc(34% - 10px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial__copy h3 {
  width: 100%;
  margin: 16px 0;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial__copy span {
  width: 100%;
  font-size: 16px;
  line-height: 1.55;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial__copy a {
  margin-top: 24px;
  padding: 0 18px;
  border: 1px solid currentColor;
  line-height: 40px;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial__detail {
  width: calc(26% - 10px);
}

.demo-hub-page .demo-site--jewelry .jewel-process__body {
  display: flex;
  align-items: stretch;
  gap: 40px !important;
}

.demo-hub-page .demo-site--jewelry .jewel-process__images {
  position: static;
  display: flex;
  width: calc(52% - 20px);
  min-height: 0;
  height: 430px;
  align-items: stretch;
  gap: 16px !important;
}

.demo-hub-page .demo-site--jewelry .jewel-process__images figure,
.demo-hub-page .demo-site--jewelry .jewel-process__images figure:last-child {
  position: static;
  width: calc(60% - 8px);
  height: 430px;
  margin: 0;
  border: 0;
}

.demo-hub-page .demo-site--jewelry .jewel-process__images figure:last-child {
  width: calc(40% - 8px);
}

.demo-hub-page .demo-site--jewelry .jewel-process__steps {
  width: calc(48% - 20px);
  height: 430px;
  align-self: auto;
}

.demo-hub-page .demo-site--jewelry .jewel-process__steps article {
  display: flex;
  min-height: 107px;
  flex: 1 1 25%;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}

.demo-hub-page .demo-site--jewelry .jewel-process__steps article span {
  width: 92px;
  flex-basis: 92px;
  font-size: 28px;
}

.demo-hub-page .demo-site--jewelry .jewel-process__steps article p {
  width: calc(100% - 116px);
  font-size: 15px;
  line-height: 1.5;
}

.demo-hub-page .demo-site--jewelry .jewel-custom {
  display: flex;
  min-height: 0 !important;
  align-items: stretch;
  gap: 40px;
  background: #c9b8a5;
}

.demo-hub-page .demo-site--jewelry .jewel-custom__copy {
  display: flex;
  width: calc(44% - 20px);
  min-height: 500px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-custom__copy h3 {
  width: 100%;
  margin: 14px 0 18px;
}

.demo-hub-page .demo-site--jewelry .jewel-custom__copy > span {
  width: 100%;
  max-width: none;
  font-size: 16px;
  line-height: 1.55;
}

.demo-hub-page .demo-site--jewelry .jewel-custom__copy figure {
  width: 100%;
  height: 220px;
  margin: auto 0 0;
}

.demo-hub-page .demo-site--jewelry .jewel-custom form {
  display: flex;
  width: calc(56% - 20px);
  min-height: 500px;
  align-content: flex-start;
  gap: 16px 20px;
  padding: 0 !important;
  background: transparent;
  color: var(--jewel-ink);
}

.demo-hub-page .demo-site--jewelry .jewel-custom form label {
  width: calc(50% - 10px);
}

.demo-hub-page .demo-site--jewelry .jewel-custom form input,
.demo-hub-page .demo-site--jewelry .jewel-custom form textarea {
  padding: 12px 0;
  border-bottom-color: rgba(33, 29, 25, 0.45);
  color: var(--jewel-ink);
}

.demo-hub-page .demo-site--jewelry .jewel-custom form > button {
  width: 100%;
  margin-top: 4px;
  background: var(--jewel-ink);
  color: var(--jewel-paper);
}

.demo-hub-page .demo-site--jewelry .jewel-local__content {
  display: flex;
  min-height: 0;
  height: 380px;
  align-items: stretch;
  gap: 40px !important;
  background: transparent;
}

.demo-hub-page .demo-site--jewelry .jewel-local__content figure {
  width: calc(62% - 20px);
  height: 380px;
}

.demo-hub-page .demo-site--jewelry .jewel-local__content > div {
  width: calc(38% - 20px);
  height: 380px;
  justify-content: center;
  padding: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-local__content > div span {
  margin-top: 22px;
}

.demo-hub-page .demo-site--jewelry .jewel-local__content > div strong {
  margin-top: 4px;
  font-size: 34px;
}

.demo-hub-page .demo-site--jewelry .jewel-local__content > div a {
  margin-top: 24px;
  padding: 0 18px;
  border: 1px solid currentColor;
  line-height: 40px;
}

.demo-hub-page .demo-site--jewelry .jewel-final {
  position: relative;
  min-height: 0 !important;
  height: 460px !important;
}

.demo-hub-page .demo-site--jewelry .jewel-final figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.demo-hub-page .demo-site--jewelry .jewel-final figure img {
  border-radius: 0;
}

.demo-hub-page .demo-site--jewelry .jewel-final > div {
  min-height: 0;
  height: 100%;
  padding: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-final > div h3 {
  width: 100%;
  max-width: none;
  margin: 14px 0 24px;
}

.demo-hub-page .demo-site--jewelry .jewel-final > div a {
  line-height: 40px;
}

.demo-hub-page .demo-site--jewelry .jewel-footer {
  padding: 40px 60px;
}@media (max-width: 980px) {
  .demo-hub-page .demo-site--jewelry .jewel-nav nav {
    display: none;
  }
  .demo-hub-page .demo-site--jewelry .jewel-nav__menu {
    display: inline-flex;
  }
  .demo-hub-page .demo-site--jewelry .jewel-products article {
    width: calc(50% - 8px);
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial,
  .demo-hub-page .demo-site--jewelry .jewel-process__body,
  .demo-hub-page .demo-site--jewelry .jewel-custom,
  .demo-hub-page .demo-site--jewelry .jewel-local__content {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial__portrait,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__copy,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__detail,
  .demo-hub-page .demo-site--jewelry .jewel-process__images,
  .demo-hub-page .demo-site--jewelry .jewel-process__steps,
  .demo-hub-page .demo-site--jewelry .jewel-custom__copy,
  .demo-hub-page .demo-site--jewelry .jewel-custom form,
  .demo-hub-page .demo-site--jewelry .jewel-local__content figure,
  .demo-hub-page .demo-site--jewelry .jewel-local__content > div {
    width: 100%;
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial figure,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__copy {
    height: auto;
    min-height: 320px;
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial__portrait,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__detail {
    width: calc(50% - 10px);
    height: 300px;
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial__copy {
    order: -1;
    width: 100%;
    min-height: 0;
  }
  .demo-hub-page .demo-site--jewelry .jewel-local__content,
  .demo-hub-page .demo-site--jewelry .jewel-local__content figure,
  .demo-hub-page .demo-site--jewelry .jewel-local__content > div {
    height: auto;
  }
  .demo-hub-page .demo-site--jewelry .jewel-local__content figure {
    min-height: 340px;
  }}@media (max-width: 680px) {
  .demo-hub-page .demo-site--jewelry .jewel-site section {
    padding: 60px !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-nav {
    padding: 0 24px;
  }
  .demo-hub-page .demo-site--jewelry .jewel-nav__brand {
    position: static;
    margin: 0 auto;
    transform: none;
  }
  .demo-hub-page .demo-site--jewelry .jewel-hero {
    height: auto !important;
    min-height: 620px !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-hero__copy,
  .demo-hub-page .demo-site--jewelry .jewel-heading > div,
  .demo-hub-page .demo-site--jewelry .jewel-heading > p,
  .demo-hub-page .demo-site--jewelry .jewel-intro__notes article,
  .demo-hub-page .demo-site--jewelry .jewel-products article,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__portrait,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__detail,
  .demo-hub-page .demo-site--jewelry .jewel-custom form label {
    width: 100%;
  }
  .demo-hub-page .demo-site--jewelry .jewel-intro__notes,
  .demo-hub-page .demo-site--jewelry .jewel-heading,
  .demo-hub-page .demo-site--jewelry .jewel-footer {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--jewelry .jewel-heading > p {
    margin-top: 0;
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial__portrait,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__detail,
  .demo-hub-page .demo-site--jewelry .jewel-process__images,
  .demo-hub-page .demo-site--jewelry .jewel-process__images figure,
  .demo-hub-page .demo-site--jewelry .jewel-process__images figure:last-child,
  .demo-hub-page .demo-site--jewelry .jewel-process__steps {
    height: auto;
    min-height: 280px;
  }
  .demo-hub-page .demo-site--jewelry .jewel-process__images {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--jewelry .jewel-process__images figure,
  .demo-hub-page .demo-site--jewelry .jewel-process__images figure:last-child {
    width: 100%;
  }
  .demo-hub-page .demo-site--jewelry .jewel-process__steps article {
    min-height: 0;
  }
  .demo-hub-page .demo-site--jewelry .jewel-footer {
    padding: 40px 60px;
  }}
/* Cascade lock: the audited density and controls must remain the final word. */
.demo-hub-page .demo-site:not([class*=demo-site--]) section {
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100vh;
  margin: 0 !important;
  padding: clamp(1.75rem, 3vw, 3rem) clamp(1.25rem, 4vw, 4rem) !important;
  overflow: hidden;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) a {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section button,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [type=button],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [type=submit] {
  width: auto;
  height: auto !important;
  min-height: 42px !important;
  padding: 0.68rem 1rem !important;
  border: 1px solid currentColor !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section button::before,
.demo-hub-page .demo-site:not([class*=demo-site--]) section button::after {
  display: none !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section figure {
  height: auto !important;
  min-height: 0 !important;
  max-height: 50vh !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section article figure {
  max-height: 26vh !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section figure img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--consultant main > section,
.demo-hub-page .demo-site--coach main > section,
.demo-hub-page .demo-site--tutor main > section,
.demo-hub-page .demo-site--lawyer main > section,
.demo-hub-page .demo-site--designer main > section,
.demo-hub-page .demo-site--bookkeeper main > section {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--consultant .consultant-services figure,
.demo-hub-page .demo-site--consultant .consultant-call figure,
.demo-hub-page .demo-site--consultant .coach-hero > figure,
.demo-hub-page .demo-site--consultant .coach-method figure,
.demo-hub-page .demo-site--consultant .coach-about figure,
.demo-hub-page .demo-site--consultant .coach-call figure,
.demo-hub-page .demo-site--consultant .tutor-hero > figure,
.demo-hub-page .demo-site--consultant .tutor-approach figure,
.demo-hub-page .demo-site--consultant .tutor-parents figure,
.demo-hub-page .demo-site--consultant .tutor-call figure,
.demo-hub-page .demo-site--consultant .lawyer-hero > figure,
.demo-hub-page .demo-site--consultant .lawyer-approach > figure,
.demo-hub-page .demo-site--consultant .lawyer-consult figure,
.demo-hub-page .demo-site--consultant .designer-case__images figure,
.demo-hub-page .demo-site--consultant .designer-services figure,
.demo-hub-page .demo-site--consultant .designer-fit figure,
.demo-hub-page .demo-site--consultant .designer-project figure,
.demo-hub-page .demo-site--consultant .bookkeeper-services figure,
.demo-hub-page .demo-site--consultant .bookkeeper-pricing figure,
.demo-hub-page .demo-site--consultant .bookkeeper-call figure,
.demo-hub-page .demo-site--coach .consultant-services figure,
.demo-hub-page .demo-site--coach .consultant-call figure,
.demo-hub-page .demo-site--coach .coach-hero > figure,
.demo-hub-page .demo-site--coach .coach-method figure,
.demo-hub-page .demo-site--coach .coach-about figure,
.demo-hub-page .demo-site--coach .coach-call figure,
.demo-hub-page .demo-site--coach .tutor-hero > figure,
.demo-hub-page .demo-site--coach .tutor-approach figure,
.demo-hub-page .demo-site--coach .tutor-parents figure,
.demo-hub-page .demo-site--coach .tutor-call figure,
.demo-hub-page .demo-site--coach .lawyer-hero > figure,
.demo-hub-page .demo-site--coach .lawyer-approach > figure,
.demo-hub-page .demo-site--coach .lawyer-consult figure,
.demo-hub-page .demo-site--coach .designer-case__images figure,
.demo-hub-page .demo-site--coach .designer-services figure,
.demo-hub-page .demo-site--coach .designer-fit figure,
.demo-hub-page .demo-site--coach .designer-project figure,
.demo-hub-page .demo-site--coach .bookkeeper-services figure,
.demo-hub-page .demo-site--coach .bookkeeper-pricing figure,
.demo-hub-page .demo-site--coach .bookkeeper-call figure,
.demo-hub-page .demo-site--tutor .consultant-services figure,
.demo-hub-page .demo-site--tutor .consultant-call figure,
.demo-hub-page .demo-site--tutor .coach-hero > figure,
.demo-hub-page .demo-site--tutor .coach-method figure,
.demo-hub-page .demo-site--tutor .coach-about figure,
.demo-hub-page .demo-site--tutor .coach-call figure,
.demo-hub-page .demo-site--tutor .tutor-hero > figure,
.demo-hub-page .demo-site--tutor .tutor-approach figure,
.demo-hub-page .demo-site--tutor .tutor-parents figure,
.demo-hub-page .demo-site--tutor .tutor-call figure,
.demo-hub-page .demo-site--tutor .lawyer-hero > figure,
.demo-hub-page .demo-site--tutor .lawyer-approach > figure,
.demo-hub-page .demo-site--tutor .lawyer-consult figure,
.demo-hub-page .demo-site--tutor .designer-case__images figure,
.demo-hub-page .demo-site--tutor .designer-services figure,
.demo-hub-page .demo-site--tutor .designer-fit figure,
.demo-hub-page .demo-site--tutor .designer-project figure,
.demo-hub-page .demo-site--tutor .bookkeeper-services figure,
.demo-hub-page .demo-site--tutor .bookkeeper-pricing figure,
.demo-hub-page .demo-site--tutor .bookkeeper-call figure,
.demo-hub-page .demo-site--lawyer .consultant-services figure,
.demo-hub-page .demo-site--lawyer .consultant-call figure,
.demo-hub-page .demo-site--lawyer .coach-hero > figure,
.demo-hub-page .demo-site--lawyer .coach-method figure,
.demo-hub-page .demo-site--lawyer .coach-about figure,
.demo-hub-page .demo-site--lawyer .coach-call figure,
.demo-hub-page .demo-site--lawyer .tutor-hero > figure,
.demo-hub-page .demo-site--lawyer .tutor-approach figure,
.demo-hub-page .demo-site--lawyer .tutor-parents figure,
.demo-hub-page .demo-site--lawyer .tutor-call figure,
.demo-hub-page .demo-site--lawyer .lawyer-hero > figure,
.demo-hub-page .demo-site--lawyer .lawyer-approach > figure,
.demo-hub-page .demo-site--lawyer .lawyer-consult figure,
.demo-hub-page .demo-site--lawyer .designer-case__images figure,
.demo-hub-page .demo-site--lawyer .designer-services figure,
.demo-hub-page .demo-site--lawyer .designer-fit figure,
.demo-hub-page .demo-site--lawyer .designer-project figure,
.demo-hub-page .demo-site--lawyer .bookkeeper-services figure,
.demo-hub-page .demo-site--lawyer .bookkeeper-pricing figure,
.demo-hub-page .demo-site--lawyer .bookkeeper-call figure,
.demo-hub-page .demo-site--designer .consultant-services figure,
.demo-hub-page .demo-site--designer .consultant-call figure,
.demo-hub-page .demo-site--designer .coach-hero > figure,
.demo-hub-page .demo-site--designer .coach-method figure,
.demo-hub-page .demo-site--designer .coach-about figure,
.demo-hub-page .demo-site--designer .coach-call figure,
.demo-hub-page .demo-site--designer .tutor-hero > figure,
.demo-hub-page .demo-site--designer .tutor-approach figure,
.demo-hub-page .demo-site--designer .tutor-parents figure,
.demo-hub-page .demo-site--designer .tutor-call figure,
.demo-hub-page .demo-site--designer .lawyer-hero > figure,
.demo-hub-page .demo-site--designer .lawyer-approach > figure,
.demo-hub-page .demo-site--designer .lawyer-consult figure,
.demo-hub-page .demo-site--designer .designer-case__images figure,
.demo-hub-page .demo-site--designer .designer-services figure,
.demo-hub-page .demo-site--designer .designer-fit figure,
.demo-hub-page .demo-site--designer .designer-project figure,
.demo-hub-page .demo-site--designer .bookkeeper-services figure,
.demo-hub-page .demo-site--designer .bookkeeper-pricing figure,
.demo-hub-page .demo-site--designer .bookkeeper-call figure,
.demo-hub-page .demo-site--bookkeeper .consultant-services figure,
.demo-hub-page .demo-site--bookkeeper .consultant-call figure,
.demo-hub-page .demo-site--bookkeeper .coach-hero > figure,
.demo-hub-page .demo-site--bookkeeper .coach-method figure,
.demo-hub-page .demo-site--bookkeeper .coach-about figure,
.demo-hub-page .demo-site--bookkeeper .coach-call figure,
.demo-hub-page .demo-site--bookkeeper .tutor-hero > figure,
.demo-hub-page .demo-site--bookkeeper .tutor-approach figure,
.demo-hub-page .demo-site--bookkeeper .tutor-parents figure,
.demo-hub-page .demo-site--bookkeeper .tutor-call figure,
.demo-hub-page .demo-site--bookkeeper .lawyer-hero > figure,
.demo-hub-page .demo-site--bookkeeper .lawyer-approach > figure,
.demo-hub-page .demo-site--bookkeeper .lawyer-consult figure,
.demo-hub-page .demo-site--bookkeeper .designer-case__images figure,
.demo-hub-page .demo-site--bookkeeper .designer-services figure,
.demo-hub-page .demo-site--bookkeeper .designer-fit figure,
.demo-hub-page .demo-site--bookkeeper .designer-project figure,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-services figure,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing figure,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call figure {
  max-height: 34vh !important;
}

.demo-hub-page .demo-site--consultant .consultant-problems button,
.demo-hub-page .demo-site--consultant .consultant-process button,
.demo-hub-page .demo-site--consultant .coach-for button,
.demo-hub-page .demo-site--consultant .tutor-help button,
.demo-hub-page .demo-site--consultant .tutor-subjects button,
.demo-hub-page .demo-site--consultant .lawyer-process button,
.demo-hub-page .demo-site--consultant .designer-work__tabs button,
.demo-hub-page .demo-site--consultant .designer-process button,
.demo-hub-page .demo-site--consultant .bookkeeper-process button,
.demo-hub-page .demo-site--coach .consultant-problems button,
.demo-hub-page .demo-site--coach .consultant-process button,
.demo-hub-page .demo-site--coach .coach-for button,
.demo-hub-page .demo-site--coach .tutor-help button,
.demo-hub-page .demo-site--coach .tutor-subjects button,
.demo-hub-page .demo-site--coach .lawyer-process button,
.demo-hub-page .demo-site--coach .designer-work__tabs button,
.demo-hub-page .demo-site--coach .designer-process button,
.demo-hub-page .demo-site--coach .bookkeeper-process button,
.demo-hub-page .demo-site--tutor .consultant-problems button,
.demo-hub-page .demo-site--tutor .consultant-process button,
.demo-hub-page .demo-site--tutor .coach-for button,
.demo-hub-page .demo-site--tutor .tutor-help button,
.demo-hub-page .demo-site--tutor .tutor-subjects button,
.demo-hub-page .demo-site--tutor .lawyer-process button,
.demo-hub-page .demo-site--tutor .designer-work__tabs button,
.demo-hub-page .demo-site--tutor .designer-process button,
.demo-hub-page .demo-site--tutor .bookkeeper-process button,
.demo-hub-page .demo-site--lawyer .consultant-problems button,
.demo-hub-page .demo-site--lawyer .consultant-process button,
.demo-hub-page .demo-site--lawyer .coach-for button,
.demo-hub-page .demo-site--lawyer .tutor-help button,
.demo-hub-page .demo-site--lawyer .tutor-subjects button,
.demo-hub-page .demo-site--lawyer .lawyer-process button,
.demo-hub-page .demo-site--lawyer .designer-work__tabs button,
.demo-hub-page .demo-site--lawyer .designer-process button,
.demo-hub-page .demo-site--lawyer .bookkeeper-process button,
.demo-hub-page .demo-site--designer .consultant-problems button,
.demo-hub-page .demo-site--designer .consultant-process button,
.demo-hub-page .demo-site--designer .coach-for button,
.demo-hub-page .demo-site--designer .tutor-help button,
.demo-hub-page .demo-site--designer .tutor-subjects button,
.demo-hub-page .demo-site--designer .lawyer-process button,
.demo-hub-page .demo-site--designer .designer-work__tabs button,
.demo-hub-page .demo-site--designer .designer-process button,
.demo-hub-page .demo-site--designer .bookkeeper-process button,
.demo-hub-page .demo-site--bookkeeper .consultant-problems button,
.demo-hub-page .demo-site--bookkeeper .consultant-process button,
.demo-hub-page .demo-site--bookkeeper .coach-for button,
.demo-hub-page .demo-site--bookkeeper .tutor-help button,
.demo-hub-page .demo-site--bookkeeper .tutor-subjects button,
.demo-hub-page .demo-site--bookkeeper .lawyer-process button,
.demo-hub-page .demo-site--bookkeeper .designer-work__tabs button,
.demo-hub-page .demo-site--bookkeeper .designer-process button,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-process button {
  min-height: 58px !important;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--consultant .lawyer-consult form,
.demo-hub-page .demo-site--consultant .bookkeeper-call form,
.demo-hub-page .demo-site--coach .lawyer-consult form,
.demo-hub-page .demo-site--coach .bookkeeper-call form,
.demo-hub-page .demo-site--tutor .lawyer-consult form,
.demo-hub-page .demo-site--tutor .bookkeeper-call form,
.demo-hub-page .demo-site--lawyer .lawyer-consult form,
.demo-hub-page .demo-site--lawyer .bookkeeper-call form,
.demo-hub-page .demo-site--designer .lawyer-consult form,
.demo-hub-page .demo-site--designer .bookkeeper-call form,
.demo-hub-page .demo-site--bookkeeper .lawyer-consult form,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call form {
  max-height: 82vh;
  overflow: auto;
}

.demo-hub-page .pottery-editorial,
.demo-hub-page .photo-story-list,
.demo-hub-page .jewel-editorial,
.demo-hub-page .bake-products,
.demo-hub-page .flower-editorial,
.demo-hub-page .flower-products,
.demo-hub-page .artist-editorial,
.demo-hub-page .artist-products,
.demo-hub-page .boutique-editorial,
.demo-hub-page .boutique-products,
.demo-hub-page .contractor-projects,
.demo-hub-page .contractor-service-list,
.demo-hub-page .cleaning-service-list,
.demo-hub-page .landscape-project-strip,
.demo-hub-page .landscape-service-list,
.demo-hub-page .plumbing-service-list,
.demo-hub-page .auto-service-list,
.demo-hub-page .grooming-service-list,
.demo-hub-page .salon-service-list,
.demo-hub-page .consultant-services > div,
.demo-hub-page .coach-options > div,
.demo-hub-page .tutor-approach,
.demo-hub-page .lawyer-approach,
.demo-hub-page .designer-case,
.demo-hub-page .bookkeeper-services > div {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .pottery-product--tall {
  margin-top: 0 !important;
}@media (max-width: 760px) {
  .demo-hub-page .demo-site:not([class*=demo-site--]) section {
    max-height: none;
    padding: 1.75rem 1rem !important;
    overflow: visible;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) section figure,
  .demo-hub-page .demo-site:not([class*=demo-site--]) section article figure {
    max-height: 320px !important;
  }}
/* Final geometry lock — must remain last. */
.demo-hub-page .demo-site:not([class*=demo-site--]) section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 60px clamp(2.5rem, 5vw, 5rem) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > header,
.demo-hub-page .demo-site:not([class*=demo-site--]) section > div,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__copy],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__content],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__intro],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__lead] {
  max-width: none !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section h2,
.demo-hub-page .demo-site:not([class*=demo-site--]) section h3,
.demo-hub-page .demo-site:not([class*=demo-site--]) section h4,
.demo-hub-page .demo-site:not([class*=demo-site--]) section p {
  max-width: 100% !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section article {
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: var(--demo-radius, 4px) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) button,
.demo-hub-page .demo-site:not([class*=demo-site--]) [type=button],
.demo-hub-page .demo-site:not([class*=demo-site--]) [type=submit],
.demo-hub-page .demo-site:not([class*=demo-site--]) section figure,
.demo-hub-page .demo-site:not([class*=demo-site--]) section form,
.demo-hub-page .demo-site:not([class*=demo-site--]) section input,
.demo-hub-page .demo-site:not([class*=demo-site--]) section select,
.demo-hub-page .demo-site:not([class*=demo-site--]) section textarea {
  border-radius: var(--demo-radius, 4px) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > figure {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > figure img {
  width: 100%;
  height: 100% !important;
  min-height: 100%;
  max-height: none !important;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section article figure {
  height: clamp(160px, 18vw, 230px) !important;
  max-height: 230px !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] {
  display: flex;
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images] > figure,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] > figure {
  height: auto !important;
  min-height: 240px;
  max-height: none !important;
  margin: 0 !important;
  flex: 1 1 0;
  align-self: stretch;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images] > figure img,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] > figure img {
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .pottery-editorial,
.demo-hub-page .photo-story-list,
.demo-hub-page .jewel-editorial,
.demo-hub-page .bake-products,
.demo-hub-page .flower-editorial,
.demo-hub-page .flower-products,
.demo-hub-page .artist-editorial,
.demo-hub-page .artist-products,
.demo-hub-page .boutique-editorial,
.demo-hub-page .boutique-products,
.demo-hub-page .contractor-projects,
.demo-hub-page .contractor-service-list,
.demo-hub-page .cleaning-service-list,
.demo-hub-page .landscape-project-strip,
.demo-hub-page .landscape-service-list,
.demo-hub-page .plumbing-service-list,
.demo-hub-page .auto-service-list,
.demo-hub-page .grooming-service-list,
.demo-hub-page .salon-service-list,
.demo-hub-page .consultant-services > div,
.demo-hub-page .coach-options > div,
.demo-hub-page .tutor-approach,
.demo-hub-page .lawyer-approach,
.demo-hub-page .designer-case,
.demo-hub-page .bookkeeper-services > div {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .pottery-product--tall {
  margin-top: 0 !important;
}@media (max-width: 760px) {
  .demo-hub-page .demo-site:not([class*=demo-site--]) section {
    padding: 40px 1rem !important;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images],
  .demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images] > figure,
  .demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] > figure {
    width: 100%;
    min-height: 220px;
  }}
/* Alignment and spacing pass — site-specific radii, uncropped sections,
   full-width copy columns and matched image/text heights. */
.demo-hub-page .demo-site--pottery {
  --demo-radius: 4px;
}

.demo-hub-page .demo-site--photographer {
  --demo-radius: 0px;
}

.demo-hub-page .demo-site--jewelry {
  --demo-radius: 8px;
}

.demo-hub-page .demo-site--bakery {
  --demo-radius: 6px;
}

.demo-hub-page .demo-site--florist {
  --demo-radius: 3px;
}

.demo-hub-page .demo-site--artist {
  --demo-radius: 0px;
}

.demo-hub-page .demo-site--boutique {
  --demo-radius: 2px;
}

.demo-hub-page .demo-site--contractor {
  --demo-radius: 6px;
}

.demo-hub-page .demo-site--cleaning {
  --demo-radius: 8px;
}

.demo-hub-page .demo-site--landscaping {
  --demo-radius: 4px;
}

.demo-hub-page .demo-site--plumbing {
  --demo-radius: 5px;
}

.demo-hub-page .demo-site--auto {
  --demo-radius: 2px;
}

.demo-hub-page .demo-site--grooming {
  --demo-radius: 8px;
}

.demo-hub-page .demo-site--salon {
  --demo-radius: 3px;
}

.demo-hub-page .demo-site--consultant {
  --demo-radius: 0px;
}

.demo-hub-page .demo-site--coach {
  --demo-radius: 5px;
}

.demo-hub-page .demo-site--tutor {
  --demo-radius: 4px;
}

.demo-hub-page .demo-site--lawyer {
  --demo-radius: 0px;
}

.demo-hub-page .demo-site--designer {
  --demo-radius: 2px;
}

.demo-hub-page .demo-site--bookkeeper {
  --demo-radius: 6px;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 60px clamp(2.5rem, 5vw, 5rem) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > header,
.demo-hub-page .demo-site:not([class*=demo-site--]) section > div,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__copy],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__content],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__intro],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__lead] {
  max-width: none !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section h2,
.demo-hub-page .demo-site:not([class*=demo-site--]) section h3,
.demo-hub-page .demo-site:not([class*=demo-site--]) section h4,
.demo-hub-page .demo-site:not([class*=demo-site--]) section p {
  max-width: 100% !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section article {
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: var(--demo-radius) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) button,
.demo-hub-page .demo-site:not([class*=demo-site--]) [type=button],
.demo-hub-page .demo-site:not([class*=demo-site--]) [type=submit] {
  border-radius: var(--demo-radius) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section figure,
.demo-hub-page .demo-site:not([class*=demo-site--]) section form,
.demo-hub-page .demo-site:not([class*=demo-site--]) section input,
.demo-hub-page .demo-site:not([class*=demo-site--]) section select,
.demo-hub-page .demo-site:not([class*=demo-site--]) section textarea {
  border-radius: var(--demo-radius) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > figure {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > figure img {
  height: 100% !important;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section article figure {
  height: clamp(160px, 18vw, 230px) !important;
  max-height: 230px !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] {
  display: flex;
  align-items: stretch !important;
  gap: 0 !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images] > figure,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] > figure {
  height: auto !important;
  min-height: 240px;
  max-height: none !important;
  margin: 0 !important;
  flex: 1 1 0;
  align-self: stretch;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images] > figure img,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] > figure img {
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--pottery .pottery-product--tall {
  margin-top: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-products,
.demo-hub-page .demo-site--pottery .pottery-shop__catalogue {
  align-items: stretch !important;
  gap: 1rem !important;
  background: transparent;
  border: 0;
}

.demo-hub-page .demo-site--pottery .pottery-product,
.demo-hub-page .demo-site--pottery .pottery-shop-card {
  overflow: hidden;
  border: 1px solid rgba(41, 35, 29, 0.18);
}

.demo-hub-page .demo-site--pottery .pottery-product > div,
.demo-hub-page .demo-site--pottery .pottery-shop-card > div:not(.pottery-shop-card__actions) {
  width: 100%;
  padding-inline: 1rem;
}

.demo-hub-page .demo-site--pottery .pottery-product__actions,
.demo-hub-page .demo-site--pottery .pottery-shop-card__actions {
  width: 100%;
  padding: 0 1rem 1rem;
}

.demo-hub-page .demo-site--pottery .pottery-editorial,
.demo-hub-page .demo-site--pottery .pottery-about__images,
.demo-hub-page .demo-site--pottery .pottery-find__gallery {
  gap: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-about {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--pottery .pottery-about__copy,
.demo-hub-page .demo-site--pottery .pottery-about__images {
  align-self: stretch;
}

.demo-hub-page .demo-site--photographer .photo-manifesto__mosaic,
.demo-hub-page .demo-site--photographer .photo-experience__images,
.demo-hub-page .demo-site--photographer .photo-story-list {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--photographer .photo-experience,
.demo-hub-page .demo-site--photographer .photo-enquire {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial,
.demo-hub-page .demo-site--jewelry .jewel-process__images {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__lead,
.demo-hub-page .demo-site--jewelry .jewel-intro__notes {
  max-width: none !important;
}

.demo-hub-page .demo-site--bakery .bake-box__images,
.demo-hub-page .demo-site--bakery .bake-products {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--bakery .bake-box,
.demo-hub-page .demo-site--bakery .bake-cakes,
.demo-hub-page .demo-site--bakery .bake-ordering {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--florist .flower-style__images,
.demo-hub-page .demo-site--florist .flower-products,
.demo-hub-page .demo-site--florist .flower-editorial {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--florist .flower-style,
.demo-hub-page .demo-site--florist .flower-events,
.demo-hub-page .demo-site--florist .flower-delivery__body {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--artist .artist-hero__gallery,
.demo-hub-page .demo-site--artist .artist-editorial,
.demo-hub-page .demo-site--artist .artist-about,
.demo-hub-page .demo-site--artist .artist-products {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site--artist .artist-statement__copy {
  max-width: none !important;
}

.demo-hub-page .demo-site--boutique .boutique-products,
.demo-hub-page .demo-site--boutique .boutique-story__images,
.demo-hub-page .demo-site--boutique .boutique-editorial {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--boutique .boutique-story,
.demo-hub-page .demo-site--boutique .boutique-store {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--contractor .contractor-projects,
.demo-hub-page .demo-site--contractor .contractor-service-list {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--contractor .contractor-pricing,
.demo-hub-page .demo-site--contractor .contractor-area {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--cleaning .cleaning-service-list,
.demo-hub-page .demo-site--cleaning .cleaning-process,
.demo-hub-page .demo-site--cleaning .cleaning-included__content {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--cleaning .cleaning-quote,
.demo-hub-page .demo-site--cleaning .cleaning-included {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--landscaping .landscape-intro > div,
.demo-hub-page .demo-site--landscaping .landscape-project-strip,
.demo-hub-page .demo-site--landscaping .landscape-service-list,
.demo-hub-page .demo-site--landscaping .landscape-comparison {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--landscaping .landscape-quote,
.demo-hub-page .demo-site--landscaping .landscape-why {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--plumbing .plumbing-hero__images,
.demo-hub-page .demo-site--plumbing .plumbing-service-list,
.demo-hub-page .demo-site--plumbing .plumbing-reviews {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--plumbing .plumbing-emergency,
.demo-hub-page .demo-site--plumbing .plumbing-request {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--auto .auto-service-list,
.demo-hub-page .demo-site--auto .auto-principles,
.demo-hub-page .demo-site--auto .auto-reviews {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--auto .auto-difference,
.demo-hub-page .demo-site--auto .auto-appointment {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--grooming .grooming-service-list,
.demo-hub-page .demo-site--grooming .grooming-experience__images,
.demo-hub-page .demo-site--grooming .grooming-gallery {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--grooming .grooming-experience,
.demo-hub-page .demo-site--grooming .grooming-book {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--salon .salon-work__gallery,
.demo-hub-page .demo-site--salon .salon-service-list,
.demo-hub-page .demo-site--salon .salon-team {
  gap: 0 !important;
  align-items: stretch;
}

.demo-hub-page .demo-site--salon .salon-first-visit,
.demo-hub-page .demo-site--salon .salon-book {
  align-items: stretch !important;
}

.demo-hub-page .demo-site--consultant .consultant-services > div,
.demo-hub-page .demo-site--consultant .consultant-proof > div,
.demo-hub-page .demo-site--consultant .consultant-call {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site--coach .coach-method,
.demo-hub-page .demo-site--coach .coach-options > div,
.demo-hub-page .demo-site--coach .coach-about,
.demo-hub-page .demo-site--coach .coach-call {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site--tutor .tutor-approach,
.demo-hub-page .demo-site--tutor .tutor-parents,
.demo-hub-page .demo-site--tutor .tutor-pricing,
.demo-hub-page .demo-site--tutor .tutor-call {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site--lawyer .lawyer-hero,
.demo-hub-page .demo-site--lawyer .lawyer-approach,
.demo-hub-page .demo-site--lawyer .lawyer-experience > div,
.demo-hub-page .demo-site--lawyer .lawyer-matters > div,
.demo-hub-page .demo-site--lawyer .lawyer-consult {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site--designer .designer-case,
.demo-hub-page .demo-site--designer .designer-case__images,
.demo-hub-page .demo-site--designer .designer-services > div,
.demo-hub-page .demo-site--designer .designer-fit,
.demo-hub-page .demo-site--designer .designer-pricing,
.demo-hub-page .demo-site--designer .designer-project {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-hero,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-services > div,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-report,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > div,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call {
  gap: 0 !important;
  align-items: stretch !important;
}@media (max-width: 760px) {
  .demo-hub-page .demo-site:not([class*=demo-site--]) section {
    padding: 40px 1rem !important;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images],
  .demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images] > figure,
  .demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] > figure {
    width: 100%;
    min-height: 220px;
  }}
.demo-hub-page {
  background: var(--color-background);
  color: var(--color-text);
}

.demo-hub-page.pottery-panel-open {
  overflow: hidden;
}

.demo-hub-page .demo-hub__intro {
  display: flex;
  min-height: 62svh;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 8rem;
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

.demo-hub-page .demo-hub__intro h1 {
  max-width: 58rem;
  margin: 0;
  font-size: clamp(2.4rem, 5.6vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-align: left;
}

.demo-hub-page .demo-hub__intro > p:last-child {
  max-width: 48rem;
  margin: 1.75rem 0 0;
  color: var(--color-muted);
  font-size: clamp(0.88rem, 1.2vw, 1rem);
}

.demo-hub-page .demo-hub__kicker,
.demo-hub-page .demo-conversion__kicker {
  margin: 0 0 1.25rem;
  color: var(--color-accent);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-hub {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.demo-hub-page .demo-hub__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.demo-hub-page .demo-hub__tabs {
  display: flex;
  max-width: 48rem;
  flex: 1 1 38rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.demo-hub-page .demo-hub__tab {
  min-height: 2.6rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: transparent;
  color: var(--color-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  cursor: pointer;
}

.demo-hub-page .demo-hub__tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-light-text);
}

.demo-hub-page .demo-hub__selector {
  display: flex;
  min-width: min(100%, 20rem);
  flex: 0 1 24rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.demo-hub-page .demo-hub__selector label {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.demo-hub-page .demo-hub__selector select {
  width: 100%;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  background: #1d1d1d;
  color: #ffffff;
  font: inherit;
}

.demo-hub-page .demo-hub__note {
  width: 100%;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.72rem;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) {
  --demo-bg: #ebe5d9;
  --demo-ink: #29251f;
  --demo-accent: #9b4d2e;
  --demo-soft: #d7c7b1;
  overflow: hidden;
  background: var(--demo-bg);
  color: var(--demo-ink);
  transition: background-color 280ms ease, color 280ms ease;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) h2,
.demo-hub-page .demo-site:not([class*=demo-site--]) h3,
.demo-hub-page .demo-site:not([class*=demo-site--]) p {
  color: inherit;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) button {
  min-height: 2.75rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--demo-accent);
  border-radius: 999px;
  background: var(--demo-accent);
  color: var(--demo-bg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  cursor: pointer;
}

.demo-hub-page .demo-site__bar {
  display: flex;
  width: min(100% - 3rem, 86rem);
  min-height: 4.5rem;
  margin-inline: auto;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--demo-ink) 22%, transparent);
}

.demo-hub-page .demo-site__bar strong {
  margin-right: auto;
  font-family: "GC Neue Machine", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
}

.demo-hub-page .demo-site__bar span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.demo-hub-page .demo-site__hero {
  display: flex;
  min-height: min(48rem, 86svh);
  align-items: stretch;
}

.demo-hub-page .demo-site__hero-copy {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 7vw, 8rem);
}

.demo-hub-page .demo-site__hero-copy h2 {
  max-width: 44rem;
  margin: 0;
  font-size: clamp(2.8rem, 5.5vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-transform: none;
}

.demo-hub-page .demo-site__hero-copy > p:not(.demo-site__eyebrow) {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.5;
}

.demo-hub-page .demo-site__hero-copy small {
  margin-top: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
}

.demo-hub-page .demo-site__eyebrow,
.demo-hub-page .demo-site__section-label {
  margin: 0 0 1rem;
  color: var(--demo-accent) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 2rem;
}

.demo-hub-page .demo-site__actions .is-secondary {
  background: transparent;
  color: var(--demo-ink);
}

.demo-hub-page .demo-site__hero-image {
  width: 48%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .demo-site__hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site__section {
  width: min(100% - 3rem, 86rem);
  margin-inline: auto;
  padding: clamp(4.5rem, 9vw, 9rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--demo-ink) 22%, transparent);
}

.demo-hub-page .demo-site__section > h3,
.demo-hub-page .demo-site__section > div > h3 {
  max-width: 54rem;
  margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: none;
}

.demo-hub-page .demo-site__feature-list {
  display: flex;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid color-mix(in srgb, var(--demo-ink) 22%, transparent);
}

.demo-hub-page .demo-site__feature-list article {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  border-right: 1px solid color-mix(in srgb, var(--demo-ink) 22%, transparent);
}

.demo-hub-page .demo-site__feature-list article:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site__feature-list span {
  font-family: "GC Neue Machine", Arial, Helvetica, sans-serif;
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.demo-hub-page .demo-site__feature-list p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

.demo-hub-page .demo-site__proof {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(2rem, 8vw, 8rem);
  padding-right: clamp(2rem, 8vw, 8rem);
  padding-left: clamp(2rem, 8vw, 8rem);
  background: var(--demo-soft);
}

.demo-hub-page .demo-site__proof > div,
.demo-hub-page .demo-site__proof > p {
  flex: 1 1 0;
}

.demo-hub-page .demo-site__proof > p {
  max-width: 34rem;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.55;
}

.demo-hub-page .demo-site__steps ol {
  display: flex;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--demo-ink) 22%, transparent);
}

.demo-hub-page .demo-site__steps ol li {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border-right: 1px solid color-mix(in srgb, var(--demo-ink) 22%, transparent);
}

.demo-hub-page .demo-site__steps ol li:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site__steps ol span {
  color: var(--demo-accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
}

.demo-hub-page .demo-site__steps ol p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site__enquiry {
  display: flex;
  align-items: flex-start;
  gap: clamp(3rem, 8vw, 8rem);
}

.demo-hub-page .demo-site__enquiry > div,
.demo-hub-page .demo-site__enquiry > form {
  min-width: 0;
  flex: 1 1 0;
}

.demo-hub-page .demo-site__enquiry-copy > p:last-child {
  max-width: 32rem;
  margin: 1.5rem 0 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

.demo-hub-page .demo-site__enquiry form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.demo-hub-page .demo-site__enquiry form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .demo-site__enquiry form label span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
}

.demo-hub-page .demo-site__enquiry form input,
.demo-hub-page .demo-site__enquiry form textarea {
  width: 100%;
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px solid var(--demo-ink);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--demo-ink);
  font: inherit;
}

.demo-hub-page .demo-site__enquiry form button {
  align-self: flex-start;
  margin-top: 1rem;
}

.demo-hub-page .demo-site__enquiry form small {
  font-family: Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site__final {
  display: flex;
  min-height: 22rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(3rem, 7vw, 7rem);
  background: var(--demo-ink);
  color: var(--demo-bg);
}

.demo-hub-page .demo-site__final p {
  max-width: 48rem;
  margin: 0;
  font-family: "GC Neue Machine", Arial, Helvetica, sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 5.2rem);
  line-height: 0.95;
}

.demo-hub-page .demo-conversion {
  padding: clamp(5rem, 10vw, 9rem) 0;
  border-top: 0.6rem solid var(--color-accent);
  background: var(--color-background);
}

.demo-hub-page .demo-conversion__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.demo-hub-page .demo-conversion__lead {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.demo-hub-page .demo-conversion__lead h2 {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 5.8rem);
  line-height: 0.94;
}

.demo-hub-page .demo-conversion__lead p {
  margin: 0.8rem 0 0;
  color: var(--color-muted);
}

.demo-hub-page .demo-conversion__offer {
  display: flex;
  max-width: 22rem;
  flex: 0 1 22rem;
  flex-direction: column;
  align-items: flex-start;
}

.demo-hub-page .demo-conversion__offer strong {
  color: var(--color-accent);
  font-family: "GC Neue Machine", Arial, Helvetica, sans-serif;
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 400;
  line-height: 0.8;
}

.demo-hub-page .demo-conversion__offer span {
  margin-top: 1rem;
  color: var(--color-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.72rem;
}

.demo-hub-page .demo-conversion__copy {
  max-width: 52rem;
  margin: 3rem 0 0;
  color: var(--color-muted);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
}

.demo-hub-page .demo-conversion__packages {
  display: flex;
  width: 100%;
  margin-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.demo-hub-page .demo-conversion__packages article {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.demo-hub-page .demo-conversion__packages article:last-child {
  border-right: 0;
}

.demo-hub-page .demo-conversion__packages p {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.demo-hub-page .demo-conversion__packages strong {
  font-family: "GC Neue Machine", Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 400;
}

.demo-hub-page .demo-conversion__packages span {
  color: var(--color-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.75rem;
}

.demo-hub-page .demo-conversion__form {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(5rem, 10vw, 9rem);
}

.demo-hub-page .demo-conversion__form > label {
  display: flex;
  width: calc(50% - 0.75rem);
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .demo-conversion__form label span {
  color: var(--color-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.demo-hub-page .demo-conversion__form input,
.demo-hub-page .demo-conversion__form select {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: #191919;
  color: #ffffff;
  font: inherit;
}

.demo-hub-page .demo-conversion__form-heading {
  width: 100%;
  margin-bottom: 2rem;
}

.demo-hub-page .demo-conversion__form-heading h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4.5rem);
  text-transform: uppercase;
}

.demo-hub-page .demo-conversion__form-heading p {
  max-width: 42rem;
  margin: 1rem 0 0;
  color: var(--color-muted);
}

.demo-hub-page .demo-conversion__wide {
  width: 100% !important;
}

.demo-hub-page .demo-conversion__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.demo-hub-page .demo-conversion__submit .button {
  padding-inline: 1.5rem;
}

.demo-hub-page .demo-conversion__submit p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.7rem;
}

.demo-hub-page .demo-conversion__success {
  width: 100%;
  color: var(--color-accent) !important;
}

.demo-hub-page .demo-site--pottery {
  background: #f0ece3;
  color: #29231d;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--pottery .pottery-site {
  background: #f0ece3;
  color: #29231d;
}

.demo-hub-page .demo-site--pottery h2,
.demo-hub-page .demo-site--pottery h3 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-transform: none;
}

.demo-hub-page .demo-site--pottery p,
.demo-hub-page .demo-site--pottery a,
.demo-hub-page .demo-site--pottery span,
.demo-hub-page .demo-site--pottery small,
.demo-hub-page .demo-site--pottery input,
.demo-hub-page .demo-site--pottery textarea,
.demo-hub-page .demo-site--pottery button {
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--pottery button {
  min-height: 2.7rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid #29231d;
  border-radius: 0;
  background: #29231d;
  color: #f0ece3;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.demo-hub-page .pottery-nav {
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(41, 35, 29, 0.22);
}

.demo-hub-page .pottery-nav a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .pottery-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.5vw, 2.75rem);
}

.demo-hub-page .pottery-nav nav a {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-nav > button {
  display: flex;
  min-height: auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #29231d;
}

.demo-hub-page .pottery-nav > button span {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.demo-hub-page .pottery-nav__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.demo-hub-page .pottery-nav__brand strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.demo-hub-page .pottery-nav__brand span {
  margin-top: 0.35rem;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-hero {
  display: flex;
  min-height: 42rem;
  align-items: stretch;
  border-bottom: 1px solid rgba(41, 35, 29, 0.22);
}

.demo-hub-page .pottery-hero__copy {
  display: flex;
  width: 45%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem) clamp(1.5rem, 5vw, 5.5rem);
}

.demo-hub-page .pottery-hero__copy h2 {
  max-width: 38rem;
  margin: 0;
  font-size: clamp(3rem, 4.6vw, 5rem);
  line-height: 0.93;
}

.demo-hub-page .pottery-overline {
  margin: 0 0 2rem;
  font-size: 0.58rem !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-hero__intro {
  max-width: 31rem;
  margin: 1.75rem 0 0;
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.65;
}

.demo-hub-page .pottery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.demo-hub-page .pottery-actions .pottery-link-button {
  padding-right: 0;
  padding-left: 0;
  border-width: 0 0 1px;
  background: transparent;
  color: #29231d;
}

.demo-hub-page .pottery-hero__meta {
  margin: 2rem 0 0;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.demo-hub-page .pottery-hero__visual {
  position: relative;
  width: 55%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .pottery-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .pottery-hero__visual figcaption {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  min-width: 10rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  background: rgba(240, 236, 227, 0.92);
  color: #29231d;
}

.demo-hub-page .pottery-hero__visual figcaption span {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-hero__visual figcaption strong {
  margin-top: 0.3rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
}

.demo-hub-page .pottery-material-strip {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1rem;
  border-bottom: 1px solid rgba(41, 35, 29, 0.22);
}

.demo-hub-page .pottery-material-strip span {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-material-strip i {
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #9a4e32;
}

.demo-hub-page .pottery-collection,
.demo-hub-page .pottery-find {
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .pottery-section-heading {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 8vw, 9rem);
}

.demo-hub-page .pottery-section-heading > p {
  width: 12rem;
  flex: 0 0 12rem;
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-section-heading > div {
  max-width: 48rem;
}

.demo-hub-page .pottery-section-heading h3 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  line-height: 0.98;
}

.demo-hub-page .pottery-section-heading div p {
  max-width: 38rem;
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
}

.demo-hub-page .pottery-products {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(3.5rem, 7vw, 7rem);
}

.demo-hub-page .pottery-product {
  display: flex;
  min-width: 15rem;
  flex: 1 1 calc(25% - 2rem);
  flex-direction: column;
}

.demo-hub-page .pottery-product figure {
  aspect-ratio: 0.82;
  margin: 0;
  overflow: hidden;
  background: #e2dbd0;
}

.demo-hub-page .pottery-product img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-hub-page .pottery-product:hover img {
  transform: scale(1.035);
}

.demo-hub-page .pottery-product > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.15rem 0 0;
}

.demo-hub-page .pottery-product em {
  margin-bottom: 0.65rem;
  color: #9a4e32;
  font-size: 0.55rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-product span {
  font-family: "Italiana", Georgia, serif;
  font-size: 1.35rem;
}

.demo-hub-page .pottery-product small {
  max-width: 18rem;
  margin-top: 0.6rem;
  color: rgba(41, 35, 29, 0.72);
  font-size: 0.68rem;
  line-height: 1.5;
}

.demo-hub-page .pottery-product b {
  margin-top: 0.9rem;
  font-size: 0.65rem;
  font-weight: 500;
}

.demo-hub-page .pottery-product--tall {
  margin-top: 4rem;
}

.demo-hub-page .pottery-product--wide {
  flex-grow: 1.25;
}

.demo-hub-page .pottery-product--wide figure {
  aspect-ratio: 1/1.08;
}

.demo-hub-page .pottery-outline-button {
  display: flex;
  margin: 4rem 0 0 auto;
  align-items: center;
  gap: 3rem;
  border-color: #29231d !important;
  background: transparent !important;
  color: #29231d !important;
}

.demo-hub-page .pottery-product__actions,
.demo-hub-page .pottery-shop-card__actions {
  display: flex;
  width: 100%;
  gap: 0.5rem;
  margin-top: 1rem;
}

.demo-hub-page .pottery-product__actions button,
.demo-hub-page .pottery-shop-card__actions button {
  min-height: 2.25rem;
  flex: 1 1 0;
  padding: 0.55rem;
  border-color: rgba(41, 35, 29, 0.65);
  background: transparent;
  color: #29231d;
  font-size: 0.55rem;
}

.demo-hub-page .pottery-product__actions button:last-child:not(:disabled),
.demo-hub-page .pottery-shop-card__actions button:last-child:not(:disabled) {
  background: #29231d;
  color: #f0ece3;
}

.demo-hub-page .pottery-product__actions button:disabled,
.demo-hub-page .pottery-shop-card__actions button:disabled {
  border-color: rgba(41, 35, 29, 0.2);
  color: rgba(41, 35, 29, 0.4);
  cursor: not-allowed;
}

.demo-hub-page .pottery-shop {
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 4vw, 4.5rem);
  border-top: 1px solid rgba(41, 35, 29, 0.22);
  background: #f8f5ee;
}

.demo-hub-page .pottery-shop__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.demo-hub-page .pottery-shop__header h3 {
  max-width: 38rem;
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  line-height: 0.98;
}

.demo-hub-page .pottery-shop__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.demo-hub-page .pottery-shop__filters button {
  min-height: 2.2rem;
  padding: 0.55rem 0.8rem;
  border-color: rgba(41, 35, 29, 0.38);
  background: transparent;
  color: #29231d;
  font-size: 0.55rem;
}

.demo-hub-page .pottery-shop__filters button.is-active {
  border-color: #29231d;
  background: #29231d;
  color: #f8f5ee;
}

.demo-hub-page .pottery-shop__catalogue {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 3.5rem;
  background: rgba(41, 35, 29, 0.18);
  border: 1px solid rgba(41, 35, 29, 0.18);
}

.demo-hub-page .pottery-shop-card {
  display: flex;
  width: calc(33.333% - 1px);
  min-width: 17rem;
  flex: 1 1 calc(33.333% - 1px);
  flex-direction: column;
  padding: 1rem;
  background: #f8f5ee;
}

.demo-hub-page .pottery-shop-card[hidden] {
  display: none;
}

.demo-hub-page .pottery-shop-card figure {
  position: relative;
  aspect-ratio: 0.92;
  margin: 0;
  overflow: hidden;
  background: #e7e0d5;
}

.demo-hub-page .pottery-shop-card figure > span {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.4rem 0.55rem;
  background: #29231d;
  color: #f8f5ee;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-shop-card figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-hub-page .pottery-shop-card:hover figure img {
  transform: scale(1.035);
}

.demo-hub-page .pottery-shop-card > div:not(.pottery-shop-card__actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding-top: 1rem;
}

.demo-hub-page .pottery-shop-card > div:not(.pottery-shop-card__actions) p {
  width: 100%;
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.3rem;
}

.demo-hub-page .pottery-shop-card > div:not(.pottery-shop-card__actions) small {
  margin-top: 0.35rem;
  color: rgba(41, 35, 29, 0.65);
  font-size: 0.62rem;
}

.demo-hub-page .pottery-shop-card > div:not(.pottery-shop-card__actions) strong {
  margin: 0.35rem 0 0 auto;
  font-size: 0.7rem;
  font-weight: 500;
}

.demo-hub-page .pottery-commerce-notes {
  display: flex;
  border-top: 1px solid rgba(41, 35, 29, 0.22);
  border-bottom: 1px solid rgba(41, 35, 29, 0.22);
  background: #ddd6c9;
}

.demo-hub-page .pottery-commerce-notes article {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem;
  border-right: 1px solid rgba(41, 35, 29, 0.22);
}

.demo-hub-page .pottery-commerce-notes article:last-child {
  border-right: 0;
}

.demo-hub-page .pottery-commerce-notes article > span {
  color: #9a4e32;
  font-size: 0.55rem;
}

.demo-hub-page .pottery-commerce-notes article div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.demo-hub-page .pottery-commerce-notes article strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.demo-hub-page .pottery-commerce-notes article p {
  margin: 0.55rem 0 0;
  color: rgba(41, 35, 29, 0.72);
  font-size: 0.62rem;
  line-height: 1.5;
}

.demo-hub-page .pottery-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(19, 17, 14, 0.62);
  backdrop-filter: blur(4px);
}

.demo-hub-page .pottery-cart,
.demo-hub-page .pottery-detail {
  position: fixed;
  z-index: 801;
  background: #f8f5ee;
  color: #29231d;
  visibility: hidden;
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.72, 0, 0.2, 1), opacity 220ms ease, visibility 0s linear 380ms;
}

.demo-hub-page .pottery-cart.is-open,
.demo-hub-page .pottery-detail.is-open {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.demo-hub-page .pottery-cart {
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(31rem, 100%);
  flex-direction: column;
  transform: translateX(100%);
}

.demo-hub-page .pottery-cart > header {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(41, 35, 29, 0.2);
}

.demo-hub-page .pottery-cart > header > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.demo-hub-page .pottery-cart > header span {
  font-family: "Italiana", Georgia, serif;
  font-size: 1.7rem;
}

.demo-hub-page .pottery-cart > header small {
  margin-top: 0.2rem;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.demo-hub-page .pottery-cart > header button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #29231d;
  font-size: 1.8rem;
}

.demo-hub-page .pottery-cart > footer {
  margin-top: auto;
  padding: 1.5rem;
  border-top: 1px solid rgba(41, 35, 29, 0.2);
}

.demo-hub-page .pottery-cart > footer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-hub-page .pottery-cart > footer strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.demo-hub-page .pottery-cart > footer p {
  margin: 1rem 0;
  color: rgba(41, 35, 29, 0.65);
  font-size: 0.62rem;
  line-height: 1.5;
}

.demo-hub-page .pottery-cart > footer button {
  width: 100%;
}

.demo-hub-page .pottery-cart__items {
  padding: 1.5rem;
  overflow-y: auto;
}

.demo-hub-page .pottery-cart__items > p {
  margin: 0;
  color: rgba(41, 35, 29, 0.65);
  font-size: 0.75rem;
}

.demo-hub-page .pottery-cart__items article {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(41, 35, 29, 0.18);
}

.demo-hub-page .pottery-cart__items article > div {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
}

.demo-hub-page .pottery-cart__items article strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
}

.demo-hub-page .pottery-cart__items article small,
.demo-hub-page .pottery-cart__items article span {
  margin-top: 0.25rem;
  color: rgba(41, 35, 29, 0.65);
  font-size: 0.58rem;
}

.demo-hub-page .pottery-cart__items article b {
  font-size: 0.68rem;
  font-weight: 500;
}

.demo-hub-page .pottery-cart__items article button {
  width: 100%;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(41, 35, 29, 0.62);
  font-size: 0.55rem;
  text-align: left;
}

.demo-hub-page .pottery-detail {
  top: 50%;
  left: 50%;
  display: flex;
  width: min(70rem, 100% - 3rem);
  max-height: calc(100svh - 3rem);
  transform: translate(-50%, calc(-50% + 2rem));
  overflow: auto;
}

.demo-hub-page .pottery-detail.is-open {
  transform: translate(-50%, -50%);
}

.demo-hub-page .pottery-detail > figure,
.demo-hub-page .pottery-detail > div {
  width: 50%;
}

.demo-hub-page .pottery-detail > figure {
  min-height: 38rem;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .pottery-detail > figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .pottery-detail__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #29231d !important;
  font-size: 1.8rem !important;
}

.demo-hub-page .pottery-detail__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.demo-hub-page .pottery-detail__copy h3 {
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 0.98;
}

.demo-hub-page .pottery-detail__copy > strong {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.demo-hub-page .pottery-detail__copy > p:not(.pottery-overline) {
  margin: 1.5rem 0;
  color: rgba(41, 35, 29, 0.72);
  font-size: 0.75rem;
  line-height: 1.6;
}

.demo-hub-page .pottery-detail__copy label {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.demo-hub-page .pottery-detail__copy label span {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-detail__copy label select {
  min-height: 2.8rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(41, 35, 29, 0.35);
  border-radius: 0;
  background: transparent;
  color: #29231d;
}

.demo-hub-page .pottery-detail__copy > button {
  width: 100%;
  margin-top: 1.25rem;
}

.demo-hub-page .pottery-detail__copy ul {
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  color: rgba(41, 35, 29, 0.68);
  font-size: 0.6rem;
  line-height: 1.8;
}

.demo-hub-page .pottery-editorial {
  display: flex;
  min-height: 44rem;
  flex-wrap: wrap;
  align-items: stretch;
  background: #2d332b;
  color: #f0ece3;
}

.demo-hub-page .pottery-editorial figure {
  width: 20%;
  min-height: 20rem;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .pottery-editorial figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .pottery-editorial .pottery-editorial__large {
  width: 55%;
}

.demo-hub-page .pottery-editorial figure:nth-of-type(n + 3) {
  width: 25%;
}

.demo-hub-page .pottery-editorial__statement {
  display: flex;
  width: 25%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 3rem;
}

.demo-hub-page .pottery-editorial__statement span {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  line-height: 2;
  text-transform: uppercase;
}

.demo-hub-page .pottery-editorial__statement p {
  margin: 0;
  color: #f0ece3;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.8rem, 2.6vw, 3rem);
  line-height: 1.05;
}

.demo-hub-page .pottery-commission {
  display: flex;
  min-height: 52rem;
  align-items: stretch;
  background: #1e1c19;
  color: #f0ece3;
}

.demo-hub-page .pottery-commission__visuals {
  position: relative;
  width: 54%;
  min-height: 45rem;
  overflow: hidden;
}

.demo-hub-page .pottery-commission__visuals figure {
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .pottery-commission__visuals figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .pottery-commission__visuals .is-main {
  width: 82%;
  height: 100%;
}

.demo-hub-page .pottery-commission__visuals .is-small {
  position: absolute;
  right: 2rem;
  bottom: 3rem;
  width: 38%;
  aspect-ratio: 0.85;
  border: 0.75rem solid #1e1c19;
}

.demo-hub-page .pottery-commission__copy {
  display: flex;
  width: 46%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .pottery-commission__copy h3 {
  max-width: 34rem;
  margin: 0;
  color: #f0ece3;
  font-size: clamp(2.7rem, 4vw, 4.5rem);
  line-height: 0.98;
}

.demo-hub-page .pottery-commission__copy > p:not(.pottery-overline) {
  max-width: 32rem;
  margin: 1.25rem 0 0;
  color: rgba(240, 236, 227, 0.78);
  font-size: 0.82rem;
  line-height: 1.65;
}

.demo-hub-page .pottery-commission__copy ul {
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
  color: rgba(240, 236, 227, 0.78);
  font-size: 0.78rem;
  line-height: 1.8;
}

.demo-hub-page .pottery-commission__copy form {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.demo-hub-page .pottery-commission__copy form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.demo-hub-page .pottery-commission__copy form label span,
.demo-hub-page .pottery-commission__copy form small {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-commission__copy form input,
.demo-hub-page .pottery-commission__copy form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(240, 236, 227, 0.42);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #f0ece3;
  font-size: 0.78rem;
}

.demo-hub-page .pottery-commission__copy form button {
  align-self: flex-start;
  margin-top: 0.75rem;
  border-color: #f0ece3;
  background: #f0ece3;
  color: #1e1c19;
}

.demo-hub-page .pottery-about {
  display: flex;
  min-height: 46rem;
  align-items: stretch;
}

.demo-hub-page .pottery-about__copy {
  display: flex;
  width: 42%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .pottery-about__copy h3 {
  margin: 0;
  font-size: clamp(2.8rem, 4.3vw, 4.8rem);
  line-height: 0.96;
}

.demo-hub-page .pottery-about__copy > p:not(.pottery-overline) {
  max-width: 30rem;
  margin: 1.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.7;
}

.demo-hub-page .pottery-about__images {
  display: flex;
  width: 58%;
  align-items: stretch;
}

.demo-hub-page .pottery-about__images figure {
  width: 42%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .pottery-about__images figure:first-child {
  width: 58%;
}

.demo-hub-page .pottery-about__images figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .pottery-find {
  background: #ddd6c9;
}

.demo-hub-page .pottery-find__details {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(41, 35, 29, 0.28);
}

.demo-hub-page .pottery-find__details article {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
}

.demo-hub-page .pottery-find__details span {
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .pottery-find__details strong {
  margin-top: 0.65rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 400;
}

.demo-hub-page .pottery-find__details p {
  max-width: 22rem;
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
}

.demo-hub-page .pottery-find__details button {
  margin-left: auto;
}

.demo-hub-page .pottery-find__gallery {
  display: flex;
  gap: 1rem;
  margin-top: 4rem;
}

.demo-hub-page .pottery-find__gallery figure {
  width: 30%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .pottery-find__gallery figure:nth-child(2) {
  width: 40%;
  margin-top: 3rem;
}

.demo-hub-page .pottery-find__gallery figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1.1;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .pottery-final {
  display: flex;
  min-height: 36rem;
  align-items: stretch;
  background: #9a4e32;
  color: #f5efe5;
}

.demo-hub-page .pottery-final figure,
.demo-hub-page .pottery-final > div {
  width: 50%;
}

.demo-hub-page .pottery-final figure {
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .pottery-final figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .pottery-final > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .pottery-final p {
  margin: 0 0 1rem;
  color: #f5efe5;
  font-size: 0.72rem;
}

.demo-hub-page .pottery-final h3 {
  max-width: 34rem;
  margin: 0;
  color: #f5efe5;
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  line-height: 0.95;
}

.demo-hub-page .pottery-final button {
  margin-top: 2rem;
  border-color: #f5efe5;
  background: #f5efe5;
  color: #9a4e32;
}

.demo-hub-page .pottery-footer {
  display: flex;
  min-height: 9rem;
  align-items: center;
  gap: 2rem;
  padding: 2rem clamp(1.25rem, 4vw, 4.5rem);
  background: #f0ece3;
  color: #29231d;
}

.demo-hub-page .pottery-footer strong {
  margin-right: auto;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
}

.demo-hub-page .pottery-footer span {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--photographer {
  background: #e9e8e2;
  color: #171816;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--photographer h2,
.demo-hub-page .demo-site--photographer h3,
.demo-hub-page .demo-site--photographer h4 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: none;
}

.demo-hub-page .demo-site--photographer a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--photographer button,
.demo-hub-page .demo-site--photographer input,
.demo-hub-page .demo-site--photographer select,
.demo-hub-page .demo-site--photographer textarea {
  font: inherit;
}

.demo-hub-page .demo-site--photographer img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .photo-site {
  overflow: hidden;
  background: #e9e8e2;
}

.demo-hub-page .photo-nav {
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(23, 24, 22, 0.25);
}

.demo-hub-page .photo-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.5vw, 2.75rem);
}

.demo-hub-page .photo-nav nav a {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .photo-nav__brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.demo-hub-page .photo-nav__brand strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.demo-hub-page .photo-nav__brand span {
  margin-top: 0.3rem;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.demo-hub-page .photo-nav__enquire {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .photo-hero {
  position: relative;
  display: flex;
  min-height: 52rem;
  align-items: stretch;
  background: #e9e8e2;
}

.demo-hub-page .photo-hero__copy {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 7vw, 8rem) clamp(1.5rem, 5vw, 6rem);
}

.demo-hub-page .photo-hero__copy h2 {
  max-width: 51rem;
  margin: 1.5rem 0;
  font-size: clamp(4rem, 7.4vw, 8.4rem);
  line-height: 0.82;
}

.demo-hub-page .photo-hero__copy > p:not(.photo-kicker) {
  max-width: 36rem;
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.55;
}

.demo-hub-page .photo-hero__copy > small {
  margin-top: 2.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .photo-kicker {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  line-height: 1.6;
  text-transform: uppercase;
}

.demo-hub-page .photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.demo-hub-page .photo-actions a {
  padding: 0.9rem 1.2rem;
  border: 1px solid #171816;
  background: #171816;
  color: #f4f2eb;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .photo-actions a.is-light {
  background: transparent;
  color: #171816;
}

.demo-hub-page .photo-hero__main {
  width: 48%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .photo-hero__detail {
  position: absolute;
  right: 43%;
  bottom: 3rem;
  width: clamp(8rem, 12vw, 14rem);
  aspect-ratio: 0.8;
  margin: 0;
  overflow: hidden;
  border: 0.5rem solid #e9e8e2;
}

.demo-hub-page .photo-manifesto {
  display: flex;
  min-height: 44rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: clamp(5rem, 10vw, 11rem) clamp(1.5rem, 6vw, 7rem);
  background: #1d211e;
  color: #eeede7;
}

.demo-hub-page .photo-manifesto > p {
  max-width: 68rem;
  margin: 0;
  text-align: center;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(2.7rem, 5.4vw, 6.3rem);
  line-height: 0.96;
}

.demo-hub-page .photo-manifesto__mosaic {
  display: flex;
  width: min(100%, 75rem);
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.5vw, 1.5rem);
}

.demo-hub-page .photo-manifesto__mosaic figure {
  width: 18%;
  aspect-ratio: 0.75;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .photo-manifesto__mosaic figure:nth-child(2) {
  width: 28%;
  aspect-ratio: 1.25;
}

.demo-hub-page .photo-manifesto__mosaic figure:nth-child(3) {
  width: 24%;
  aspect-ratio: 0.85;
}

.demo-hub-page .photo-manifesto__mosaic figure:nth-child(4) {
  width: 15%;
  aspect-ratio: 0.72;
}

.demo-hub-page .photo-sessions,
.demo-hub-page .photo-stories,
.demo-hub-page .photo-faq {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .photo-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 7vw, 7rem);
}

.demo-hub-page .photo-section-heading > p {
  width: 14rem;
  flex: 0 0 14rem;
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .photo-section-heading > h3,
.demo-hub-page .photo-section-heading > div {
  width: min(70%, 62rem);
}

.demo-hub-page .photo-section-heading h3 {
  margin: 0;
  font-size: clamp(3.2rem, 6vw, 7rem);
  line-height: 0.92;
}

.demo-hub-page .photo-section-heading > div > p {
  max-width: 42rem;
  margin: 1.5rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
}

.demo-hub-page .photo-session-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(23, 24, 22, 0.3);
}

.demo-hub-page .photo-session-list article {
  display: flex;
  min-height: 14rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(23, 24, 22, 0.3);
}

.demo-hub-page .photo-session-list article > span {
  width: 3rem;
  flex: 0 0 3rem;
  font-size: 0.58rem;
}

.demo-hub-page .photo-session-list article > div {
  width: 38%;
}

.demo-hub-page .photo-session-list article h4 {
  margin: 0 0 0.65rem;
  font-size: clamp(2rem, 3.3vw, 4rem);
}

.demo-hub-page .photo-session-list article p {
  max-width: 31rem;
  margin: 0;
  line-height: 1.5;
}

.demo-hub-page .photo-session-list article figure {
  width: 16rem;
  height: 10rem;
  margin: 0 0 0 auto;
  overflow: hidden;
}

.demo-hub-page .photo-session-list article > a {
  width: 8rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .photo-stories {
  background: #d4d3cc;
}

.demo-hub-page .photo-story-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem auto;
}

.demo-hub-page .photo-story-filters button {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(23, 24, 22, 0.35);
  background: transparent;
  color: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .photo-story-filters button.is-active {
  background: #171816;
  color: #eeede7;
}

.demo-hub-page .photo-story-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2rem);
}

.demo-hub-page .photo-story {
  display: flex;
  width: calc(33.333% - 1.35rem);
  flex-direction: column;
}

.demo-hub-page .photo-story[hidden] {
  display: none;
}

.demo-hub-page .photo-story figure {
  aspect-ratio: 0.82;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .photo-story > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 1rem;
}

.demo-hub-page .photo-story span {
  font-size: 0.55rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .photo-story h4 {
  margin: 0.65rem 0;
  font-size: clamp(1.9rem, 3vw, 3.5rem);
}

.demo-hub-page .photo-story p {
  margin: 0;
  line-height: 1.55;
}

.demo-hub-page .photo-story button {
  margin-top: 1rem;
  padding: 0 0 0.3rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .photo-story--lead {
  width: calc(66.666% - 0.7rem);
}

.demo-hub-page .photo-story--lead figure {
  aspect-ratio: 1.45;
}

.demo-hub-page .photo-story--wide {
  width: 100%;
  flex-direction: row;
  align-items: flex-end;
  margin-top: clamp(3rem, 7vw, 7rem);
}

.demo-hub-page .photo-story--wide figure {
  width: 68%;
  aspect-ratio: 1.65;
}

.demo-hub-page .photo-story--wide > div {
  width: 32%;
  padding: 2rem;
}

.demo-hub-page .photo-experience {
  display: flex;
  min-height: 54rem;
  background: #eeede7;
}

.demo-hub-page .photo-experience__copy {
  display: flex;
  width: 48%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .photo-experience__copy h3 {
  max-width: 44rem;
  margin: 1.5rem 0 2rem;
  font-size: clamp(3.5rem, 6vw, 7rem);
  line-height: 0.9;
}

.demo-hub-page .photo-experience__copy > p:not(.photo-kicker) {
  max-width: 38rem;
  margin: 0 0 1rem;
  line-height: 1.65;
}

.demo-hub-page .photo-experience__copy ol {
  display: flex;
  flex-direction: column;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .photo-experience__copy ol li {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(23, 24, 22, 0.25);
}

.demo-hub-page .photo-experience__copy ol li span {
  font-size: 0.58rem;
}

.demo-hub-page .photo-experience__copy ol li p {
  margin: 0;
}

.demo-hub-page .photo-experience__images {
  position: relative;
  display: flex;
  width: 52%;
  align-items: flex-end;
  background: #9a9d93;
}

.demo-hub-page .photo-experience__images figure {
  width: 78%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .photo-experience__images figure:last-child {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 34%;
  height: 42%;
  border: 0.5rem solid #9a9d93;
}

.demo-hub-page .photo-pricing {
  display: flex;
  gap: clamp(3rem, 8vw, 9rem);
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #1d211e;
  color: #eeede7;
}

.demo-hub-page .photo-pricing > header {
  width: 38%;
}

.demo-hub-page .photo-pricing > header > p:first-child {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .photo-pricing > header h3 {
  margin: 2rem 0;
  font-size: clamp(3.3rem, 5.7vw, 6.5rem);
  line-height: 0.92;
}

.demo-hub-page .photo-pricing > header > p:last-child {
  max-width: 29rem;
  line-height: 1.6;
}

.demo-hub-page .photo-pricing__options {
  display: flex;
  width: 62%;
  align-items: stretch;
}

.demo-hub-page .photo-pricing__options article {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem;
  border: 1px solid rgba(238, 237, 231, 0.35);
}

.demo-hub-page .photo-pricing__options article + article {
  border-left: 0;
}

.demo-hub-page .photo-pricing__options span {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .photo-pricing__options strong {
  margin: 2.5rem 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 400;
}

.demo-hub-page .photo-pricing__options p {
  margin: 0 0 3rem;
  line-height: 1.6;
}

.demo-hub-page .photo-pricing__options a {
  margin-top: auto;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .photo-faq__items {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  width: min(76%, 72rem);
  border-top: 1px solid rgba(23, 24, 22, 0.3);
}

.demo-hub-page .photo-faq__items article {
  border-bottom: 1px solid rgba(23, 24, 22, 0.3);
}

.demo-hub-page .photo-faq__items article > p {
  display: none;
  max-width: 46rem;
  margin: 0;
  padding: 0 3rem 1.5rem 0;
  line-height: 1.6;
}

.demo-hub-page .photo-faq__items article.is-open > p {
  display: block;
}

.demo-hub-page .photo-faq__items button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.demo-hub-page .photo-faq__items button span {
  font-size: 1.3rem;
}

.demo-hub-page .photo-enquire {
  display: flex;
  min-height: 52rem;
  background: #c8c2b5;
}

.demo-hub-page .photo-enquire__visual {
  position: relative;
  width: 45%;
}

.demo-hub-page .photo-enquire__visual figure {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .photo-enquire__visual > p {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  margin: 0;
  color: #fff;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 0.95;
}

.demo-hub-page .photo-enquire form {
  display: flex;
  width: 55%;
  align-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .photo-enquire form > div,
.demo-hub-page .photo-enquire form .is-wide,
.demo-hub-page .photo-enquire form > button,
.demo-hub-page .photo-enquire form > small {
  width: 100%;
}

.demo-hub-page .photo-enquire form > div {
  margin-bottom: 1.5rem;
}

.demo-hub-page .photo-enquire form > div h3 {
  max-width: 48rem;
  margin: 1rem 0 0;
  font-size: clamp(2.8rem, 5vw, 5.7rem);
  line-height: 0.94;
}

.demo-hub-page .photo-enquire form label {
  display: flex;
  width: calc(50% - 0.625rem);
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .photo-enquire form label span {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .photo-enquire form input,
.demo-hub-page .photo-enquire form select,
.demo-hub-page .photo-enquire form textarea {
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(23, 24, 22, 0.45);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: inherit;
}

.demo-hub-page .photo-enquire form textarea {
  resize: vertical;
}

.demo-hub-page .photo-enquire form > button {
  padding: 1rem;
  border: 1px solid #171816;
  background: #171816;
  color: #f4f2eb;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .photo-enquire form > small {
  font-size: 0.65rem;
}

.demo-hub-page .photo-footer {
  display: flex;
  min-height: 10rem;
  align-items: center;
  gap: 2rem;
  padding: 2rem clamp(1.25rem, 4vw, 4.5rem);
  background: #e9e8e2;
  border-top: 1px solid rgba(23, 24, 22, 0.25);
}

.demo-hub-page .photo-footer > div {
  display: flex;
  margin-right: auto;
  flex-direction: column;
}

.demo-hub-page .photo-footer > div strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 400;
}

.demo-hub-page .photo-footer span,
.demo-hub-page .photo-footer p,
.demo-hub-page .photo-footer a {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--jewelry {
  background: #f1eee7;
  color: #211d19;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--jewelry h2,
.demo-hub-page .demo-site--jewelry h3 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: none;
}

.demo-hub-page .demo-site--jewelry a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--jewelry button,
.demo-hub-page .demo-site--jewelry input,
.demo-hub-page .demo-site--jewelry textarea {
  font: inherit;
}

.demo-hub-page .demo-site--jewelry img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .jewel-site {
  position: relative;
  overflow: hidden;
  background: #f1eee7;
}

.demo-hub-page .jewel-nav {
  display: flex;
  min-height: 5.25rem;
  align-items: center;
  gap: 2rem;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(33, 29, 25, 0.25);
}

.demo-hub-page .jewel-nav nav,
.demo-hub-page .jewel-nav .jewel-nav__tools {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
}

.demo-hub-page .jewel-nav nav a,
.demo-hub-page .jewel-nav button {
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-nav button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.demo-hub-page .jewel-nav__menu {
  display: none;
}

.demo-hub-page .jewel-nav__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 2.1rem);
  text-transform: uppercase;
}

.demo-hub-page .jewel-nav__brand i {
  font-size: 0.62em;
  font-style: italic;
  text-transform: none;
}

.demo-hub-page .jewel-nav__tools {
  margin-left: auto;
}

.demo-hub-page .jewel-nav__tools [data-jewel-cart-toggle] span {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.3rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.demo-hub-page .jewel-hero {
  position: relative;
  min-height: 55rem;
  color: #fff;
}

.demo-hub-page .jewel-hero > figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .jewel-hero > figure::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 12, 7, 0.54), rgba(20, 12, 7, 0.04) 65%);
  content: "";
}

.demo-hub-page .jewel-hero > small {
  position: absolute;
  right: clamp(1.25rem, 4vw, 4.5rem);
  bottom: 2rem;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(64rem, 68%);
  min-height: 55rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 8vw, 9rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .jewel-hero__copy > p {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-hero__copy h2 {
  margin: 1.5rem 0;
  font-size: clamp(5rem, 9.2vw, 10rem);
  line-height: 0.79;
}

.demo-hub-page .jewel-hero__copy > span {
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.6;
}

.demo-hub-page .jewel-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.demo-hub-page .jewel-hero__copy > div a {
  padding: 0.9rem 1.15rem;
  border: 1px solid #fff;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-hero__copy > div a:first-child {
  background: #fff;
  color: #211d19;
}

.demo-hub-page .jewel-intro {
  display: flex;
  min-height: 32rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  padding: clamp(5rem, 10vw, 11rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .jewel-intro > p {
  width: 14rem;
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-intro h3 {
  width: min(52%, 54rem);
  margin: 0;
  font-size: clamp(4rem, 7.5vw, 8rem);
  line-height: 0.88;
}

.demo-hub-page .jewel-intro > span {
  width: min(22%, 21rem);
  line-height: 1.6;
}

.demo-hub-page .jewel-shop,
.demo-hub-page .jewel-process,
.demo-hub-page .jewel-local {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .jewel-shop {
  background: #e3dfd6;
}

.demo-hub-page .jewel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .jewel-heading > div {
  width: min(68%, 60rem);
}

.demo-hub-page .jewel-heading p {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.demo-hub-page .jewel-heading h3 {
  margin: 0.75rem 0 0;
  font-size: clamp(3.5rem, 7vw, 7.8rem);
  line-height: 0.9;
}

.demo-hub-page .jewel-heading > p {
  width: min(28%, 25rem);
  text-transform: none;
}

.demo-hub-page .jewel-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.demo-hub-page .jewel-filters button {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(33, 29, 25, 0.35);
  background: transparent;
  color: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-filters button.is-active {
  background: #211d19;
  color: #f1eee7;
}

.demo-hub-page .jewel-products {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(33, 29, 25, 0.22);
  border-left: 1px solid rgba(33, 29, 25, 0.22);
}

.demo-hub-page .jewel-products article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
  padding: 1rem;
  border-right: 1px solid rgba(33, 29, 25, 0.22);
  border-bottom: 1px solid rgba(33, 29, 25, 0.22);
}

.demo-hub-page .jewel-products article[hidden] {
  display: none;
}

.demo-hub-page .jewel-products article figure {
  position: relative;
  aspect-ratio: 0.95;
  margin: 0;
  overflow: hidden;
  background: #f5f3ee;
}

.demo-hub-page .jewel-products article figure > span {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.35rem 0.5rem;
  background: #211d19;
  color: #fff;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-products article > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 1rem 0;
}

.demo-hub-page .jewel-products article > div p {
  width: 70%;
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.5rem;
}

.demo-hub-page .jewel-products article > div small {
  width: 70%;
  margin-top: 0.35rem;
  color: rgba(33, 29, 25, 0.65);
}

.demo-hub-page .jewel-products article > div strong {
  width: 30%;
  margin-left: auto;
  text-align: right;
  font-weight: 500;
}

.demo-hub-page .jewel-products article > button {
  width: 100%;
  margin-top: auto;
  padding: 0.8rem;
  border: 1px solid #211d19;
  background: transparent;
  color: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-products article > button:hover {
  background: #211d19;
  color: #f1eee7;
}

.demo-hub-page .jewel-editorial {
  display: flex;
  min-height: 55rem;
  align-items: stretch;
  background: #30251f;
  color: #f1eee7;
}

.demo-hub-page .jewel-editorial figure {
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .jewel-editorial__portrait {
  width: 42%;
}

.demo-hub-page .jewel-editorial__copy {
  display: flex;
  width: 35%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5.5rem);
}

.demo-hub-page .jewel-editorial__copy p {
  margin: 0;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-editorial__copy h3 {
  margin: 1.5rem 0;
  font-size: clamp(3.2rem, 5.5vw, 6.3rem);
  line-height: 0.9;
}

.demo-hub-page .jewel-editorial__copy span {
  line-height: 1.65;
}

.demo-hub-page .jewel-editorial__copy a {
  margin-top: 2rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-editorial__detail {
  width: 23%;
}

.demo-hub-page .jewel-editorial__detail img {
  filter: saturate(0.8);
}

.demo-hub-page .jewel-process__body {
  display: flex;
  gap: clamp(2rem, 6vw, 7rem);
}

.demo-hub-page .jewel-process__images {
  position: relative;
  display: flex;
  width: 56%;
  min-height: 50rem;
  align-items: flex-end;
}

.demo-hub-page .jewel-process__images figure {
  width: 78%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .jewel-process__images figure:last-child {
  position: absolute;
  right: 0;
  bottom: 2rem;
  width: 42%;
  height: 42%;
  border: 0.5rem solid #f1eee7;
}

.demo-hub-page .jewel-process__steps {
  display: flex;
  width: 44%;
  flex-direction: column;
  align-self: center;
  border-top: 1px solid rgba(33, 29, 25, 0.3);
}

.demo-hub-page .jewel-process__steps article {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(33, 29, 25, 0.3);
}

.demo-hub-page .jewel-process__steps article span {
  width: 5rem;
  flex: 0 0 5rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.7rem;
}

.demo-hub-page .jewel-process__steps article p {
  margin: 0;
  line-height: 1.6;
}

.demo-hub-page .jewel-custom {
  display: flex;
  min-height: 58rem;
  background: #c9b8a5;
}

.demo-hub-page .jewel-custom__copy {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .jewel-custom__copy > p {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-custom__copy h3 {
  margin: 1.5rem 0;
  font-size: clamp(3.7rem, 6.4vw, 7.2rem);
  line-height: 0.88;
}

.demo-hub-page .jewel-custom__copy > span {
  max-width: 34rem;
  line-height: 1.65;
}

.demo-hub-page .jewel-custom__copy figure {
  width: 58%;
  aspect-ratio: 1.1;
  margin: auto 0 0 auto;
  overflow: hidden;
}

.demo-hub-page .jewel-custom form {
  display: flex;
  width: 52%;
  align-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: clamp(3rem, 6vw, 7rem);
  background: #211d19;
  color: #f1eee7;
}

.demo-hub-page .jewel-custom form label {
  display: flex;
  width: calc(50% - 0.625rem);
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .jewel-custom form label.is-wide {
  width: 100%;
}

.demo-hub-page .jewel-custom form label span {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-custom form input,
.demo-hub-page .jewel-custom form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(241, 238, 231, 0.4);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: inherit;
}

.demo-hub-page .jewel-custom form > button,
.demo-hub-page .jewel-custom form > small {
  width: 100%;
}

.demo-hub-page .jewel-custom form > button {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #f1eee7;
  background: #f1eee7;
  color: #211d19;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-local__content {
  display: flex;
  min-height: 44rem;
  background: #ddd7ca;
}

.demo-hub-page .jewel-local__content figure {
  width: 62%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .jewel-local__content > div {
  display: flex;
  width: 38%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.demo-hub-page .jewel-local__content > div span {
  margin-top: 2rem;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-local__content > div span:first-child {
  margin-top: 0;
}

.demo-hub-page .jewel-local__content > div strong {
  margin-top: 0.5rem;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 400;
}

.demo-hub-page .jewel-local__content > div p {
  margin: 0.5rem 0 0;
  line-height: 1.55;
}

.demo-hub-page .jewel-local__content > div a {
  margin-top: 2.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-final {
  position: relative;
  min-height: 48rem;
  color: #fff;
}

.demo-hub-page .jewel-final figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .jewel-final figure::after {
  position: absolute;
  inset: 0;
  background: rgba(25, 16, 10, 0.35);
  content: "";
}

.demo-hub-page .jewel-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 48rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
}

.demo-hub-page .jewel-final > div p {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-final > div h3 {
  max-width: 70rem;
  margin: 1rem 0 2rem;
  font-size: clamp(4rem, 8vw, 9rem);
  line-height: 0.85;
}

.demo-hub-page .jewel-final > div a {
  padding: 0.9rem 2rem;
  border: 1px solid #fff;
  background: #fff;
  color: #211d19;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .jewel-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #211d19;
  color: #f1eee7;
}

.demo-hub-page .jewel-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .jewel-footer > div:first-child {
  margin-right: auto;
}

.demo-hub-page .jewel-footer strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
}

.demo-hub-page .jewel-footer p,
.demo-hub-page .jewel-footer a,
.demo-hub-page .jewel-footer span {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

.demo-hub-page .jewel-footer p {
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.demo-hub-page .jewel-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  background: rgba(18, 13, 10, 0.5);
}

.demo-hub-page .jewel-overlay[hidden] {
  display: none;
}

.demo-hub-page .jewel-cart {
  position: fixed;
  z-index: 1201;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(32rem, 100%);
  flex-direction: column;
  padding: 1.5rem;
  background: #f1eee7;
  color: #211d19;
  transform: translateX(105%);
  transition: transform 300ms ease;
}

.demo-hub-page .jewel-cart.is-open {
  transform: translateX(0);
}

.demo-hub-page .jewel-cart > header,
.demo-hub-page .jewel-cart > footer,
.demo-hub-page .jewel-cart article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.demo-hub-page .jewel-cart > header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(33, 29, 25, 0.25);
}

.demo-hub-page .jewel-cart > header p {
  margin: 0 0 0.3rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.demo-hub-page .jewel-cart > header button {
  border: 0;
  background: transparent;
  font-size: 1.7rem;
}

.demo-hub-page .jewel-cart > footer {
  margin-top: auto;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(33, 29, 25, 0.25);
}

.demo-hub-page .jewel-cart > footer div {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.demo-hub-page .jewel-cart > footer p {
  margin: 0;
  font-size: 0.65rem;
}

.demo-hub-page .jewel-cart > footer button {
  width: 100%;
  padding: 1rem;
  border: 0;
  background: #211d19;
  color: #f1eee7;
  text-transform: uppercase;
}

.demo-hub-page .jewel-cart__items {
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.demo-hub-page .jewel-cart__items article {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(33, 29, 25, 0.2);
}

.demo-hub-page .jewel-cart__items article div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .jewel-cart__items article button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
}

.demo-hub-page .demo-site--bakery {
  background: #fff1d7;
  color: #3b2118;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--bakery h2,
.demo-hub-page .demo-site--bakery h3 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: none;
}

.demo-hub-page .demo-site--bakery a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--bakery button,
.demo-hub-page .demo-site--bakery input,
.demo-hub-page .demo-site--bakery textarea,
.demo-hub-page .demo-site--bakery select {
  font: inherit;
}

.demo-hub-page .demo-site--bakery img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .bake-site {
  position: relative;
  overflow: hidden;
  background: #fff1d7;
}

.demo-hub-page .bake-nav {
  display: flex;
  min-height: 5rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  background: #fff1d7;
  color: #d84122;
}

.demo-hub-page .bake-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.5vw, 2.75rem);
}

.demo-hub-page .bake-nav nav a,
.demo-hub-page .bake-nav > button {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-nav > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.demo-hub-page .bake-nav > button span {
  display: inline-flex;
  width: 1.65rem;
  height: 1.65rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.demo-hub-page .bake-nav__brand {
  font-size: clamp(1.4rem, 2.8vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.demo-hub-page .bake-hero {
  display: flex;
  min-height: 52rem;
  margin: 0 clamp(1.25rem, 4vw, 4.5rem);
  overflow: hidden;
  border-radius: 1.5rem;
  background: #d84122;
  color: #fff1d7;
}

.demo-hub-page .bake-hero > figure {
  width: 52%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .bake-hero__copy {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .bake-hero__copy > p,
.demo-hub-page .bake-hero__copy > small {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .bake-hero__copy h2 {
  margin: 1.5rem 0;
  font-size: clamp(4.5rem, 7.6vw, 8.5rem);
  line-height: 0.82;
}

.demo-hub-page .bake-hero__copy > span {
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.6;
}

.demo-hub-page .bake-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 2rem 0;
}

.demo-hub-page .bake-hero__copy > div a {
  padding: 0.9rem 1.15rem;
  border: 1px solid #fff1d7;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-hero__copy > div a:first-child {
  background: #fff1d7;
  color: #d84122;
}

.demo-hub-page .bake-ticker {
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 2rem;
  padding: 1.2rem 0;
  background: #3b2118;
  color: #fff1d7;
  white-space: nowrap;
}

.demo-hub-page .bake-ticker span {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-ticker i {
  color: #ff7759;
  font-style: normal;
}

.demo-hub-page .bake-week,
.demo-hub-page .bake-shop,
.demo-hub-page .bake-ordering {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .bake-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .bake-heading > p {
  width: 10rem;
  flex: 0 0 10rem;
  margin: 0;
  color: #d84122;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .bake-heading h3 {
  width: min(60%, 60rem);
  margin: 0;
  color: #d84122;
  font-size: clamp(4rem, 7.5vw, 8rem);
  line-height: 0.86;
}

.demo-hub-page .bake-heading > span {
  width: min(20%, 20rem);
  line-height: 1.6;
}

.demo-hub-page .bake-week__categories {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .bake-week__categories article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(216, 65, 34, 0.35);
  border-radius: 1.25rem;
}

.demo-hub-page .bake-week__categories article figure {
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .bake-week__categories article > div {
  display: flex;
  min-height: 15rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
}

.demo-hub-page .bake-week__categories article > div p {
  margin: 0 0 0.75rem;
  color: #d84122;
  font-family: "Italiana", Georgia, serif;
  font-size: 2.3rem;
}

.demo-hub-page .bake-week__categories article > div span {
  line-height: 1.55;
}

.demo-hub-page .bake-week__categories article > div a {
  margin-top: auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-shop {
  background: #f7bd4e;
}

.demo-hub-page .bake-shop > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.demo-hub-page .bake-shop > header > div:first-child p {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-shop > header h3 {
  margin: 0.5rem 0 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.9;
}

.demo-hub-page .bake-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.demo-hub-page .bake-filters button {
  padding: 0.55rem 0.85rem;
  border: 1px solid #3b2118;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .bake-filters button.is-active {
  background: #3b2118;
  color: #fff1d7;
}

.demo-hub-page .bake-products {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.demo-hub-page .bake-product {
  display: flex;
  width: calc(25% - 0.75rem);
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #fff1d7;
}

.demo-hub-page .bake-product[hidden] {
  display: none;
}

.demo-hub-page .bake-product figure {
  position: relative;
  aspect-ratio: 0.92;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .bake-product figure span {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: #d84122;
  color: #fff1d7;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-hub-page .bake-product > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem;
}

.demo-hub-page .bake-product > div p {
  margin: 0;
  color: #d84122;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.8rem;
}

.demo-hub-page .bake-product > div small {
  margin: 0.5rem 0 1rem;
  line-height: 1.45;
}

.demo-hub-page .bake-product > div strong {
  margin-top: auto;
  font-size: 1.15rem;
}

.demo-hub-page .bake-product > div button {
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid #d84122;
  border-radius: 999px;
  background: transparent;
  color: #d84122;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-product--feature {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .bake-product--feature figure {
  aspect-ratio: 1.9;
}

.demo-hub-page .bake-box {
  display: flex;
  min-height: 54rem;
  background: #313e93;
  color: #fff1d7;
}

.demo-hub-page .bake-box__copy {
  display: flex;
  width: 42%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .bake-box__copy p {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .bake-box__copy h3 {
  margin: 1.5rem 0;
  font-size: clamp(4rem, 6.5vw, 7rem);
  line-height: 0.88;
}

.demo-hub-page .bake-box__copy span {
  max-width: 31rem;
  line-height: 1.6;
}

.demo-hub-page .bake-box__copy a {
  margin-top: 2rem;
  padding: 0.9rem 1.3rem;
  border: 1px solid #fff1d7;
  border-radius: 999px;
  background: #fff1d7;
  color: #313e93;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-box__images {
  display: flex;
  width: 58%;
  flex-wrap: wrap;
}

.demo-hub-page .bake-box__images figure {
  width: 50%;
  height: 50%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .bake-box__images figure:first-child {
  width: 100%;
}

.demo-hub-page .bake-cakes {
  display: flex;
  min-height: 58rem;
  background: #fff1d7;
}

.demo-hub-page .bake-cakes__visual {
  position: relative;
  width: 48%;
}

.demo-hub-page .bake-cakes__visual figure {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .bake-cakes__visual > div {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff1d7;
  color: #3b2118;
}

.demo-hub-page .bake-cakes__visual > div p {
  margin: 0 0 0.5rem;
  color: #d84122;
  font-family: "Italiana", Georgia, serif;
  font-size: 2.4rem;
}

.demo-hub-page .bake-cakes form {
  display: flex;
  width: 52%;
  align-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .bake-cakes form > div,
.demo-hub-page .bake-cakes form .is-wide,
.demo-hub-page .bake-cakes form > button,
.demo-hub-page .bake-cakes form > small {
  width: 100%;
}

.demo-hub-page .bake-cakes form > div {
  margin-bottom: 1rem;
}

.demo-hub-page .bake-cakes form > div p {
  margin: 0;
  color: #d84122;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-cakes form > div h3 {
  margin: 1rem 0;
  color: #d84122;
  font-size: clamp(4rem, 6vw, 7rem);
  line-height: 0.86;
}

.demo-hub-page .bake-cakes form label {
  display: flex;
  width: calc(50% - 0.6rem);
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .bake-cakes form label span {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-cakes form input,
.demo-hub-page .bake-cakes form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(59, 33, 24, 0.4);
  border-radius: 0;
  outline: 0;
  background: transparent;
}

.demo-hub-page .bake-cakes form > button {
  padding: 1rem;
  border: 0;
  border-radius: 999px;
  background: #d84122;
  color: #fff1d7;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-ordering {
  background: #d84122;
  color: #fff1d7;
}

.demo-hub-page .bake-ordering .bake-heading > p,
.demo-hub-page .bake-ordering .bake-heading h3 {
  color: #fff1d7;
}

.demo-hub-page .bake-ordering > div {
  display: flex;
  border-top: 1px solid rgba(255, 241, 215, 0.45);
}

.demo-hub-page .bake-ordering > div article {
  width: 33.333%;
  padding: 2rem;
  border-right: 1px solid rgba(255, 241, 215, 0.45);
}

.demo-hub-page .bake-ordering > div article:last-child {
  border-right: 0;
}

.demo-hub-page .bake-ordering > div article strong {
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 400;
}

.demo-hub-page .bake-ordering > div article p {
  max-width: 26rem;
  margin: 2rem 0 0;
  line-height: 1.6;
}

.demo-hub-page .bake-details {
  display: flex;
  min-height: 47rem;
  background: #fff1d7;
}

.demo-hub-page .bake-details > div {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .bake-details > div > p {
  margin: 0;
  color: #d84122;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-details > div h3 {
  margin: 1.5rem 0;
  color: #d84122;
  font-size: clamp(4rem, 6.5vw, 7rem);
  line-height: 0.88;
}

.demo-hub-page .bake-details > div span {
  max-width: 35rem;
  line-height: 1.65;
}

.demo-hub-page .bake-details > div a {
  margin-top: 2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-details figure {
  width: 52%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .bake-final {
  display: flex;
  min-height: 46rem;
  background: #f7bd4e;
}

.demo-hub-page .bake-final > div {
  display: flex;
  width: 58%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .bake-final > div p {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-final > div h3 {
  margin: 1.5rem 0;
  font-size: clamp(5rem, 8vw, 9rem);
  line-height: 0.83;
}

.demo-hub-page .bake-final > div a {
  padding: 0.9rem 1.3rem;
  border-radius: 999px;
  background: #3b2118;
  color: #fff1d7;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bake-final figure {
  width: 42%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .bake-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #3b2118;
  color: #fff1d7;
}

.demo-hub-page .bake-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .bake-footer > div:first-child {
  margin-right: auto;
}

.demo-hub-page .bake-footer strong {
  color: #ff7759;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.demo-hub-page .bake-footer p,
.demo-hub-page .bake-footer a,
.demo-hub-page .bake-footer span {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

.demo-hub-page .bake-footer p {
  color: #ff7759;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .bake-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  background: rgba(59, 33, 24, 0.55);
}

.demo-hub-page .bake-overlay[hidden] {
  display: none;
}

.demo-hub-page .bake-cart {
  position: fixed;
  z-index: 1201;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(33rem, 100%);
  flex-direction: column;
  padding: 1.5rem;
  background: #fff1d7;
  color: #3b2118;
  transform: translateX(105%);
  transition: transform 300ms ease;
}

.demo-hub-page .bake-cart.is-open {
  transform: translateX(0);
}

.demo-hub-page .bake-cart > header,
.demo-hub-page .bake-cart > footer,
.demo-hub-page .bake-cart article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.demo-hub-page .bake-cart > header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(59, 33, 24, 0.25);
}

.demo-hub-page .bake-cart > header p {
  margin: 0 0 0.3rem;
  color: #d84122;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.demo-hub-page .bake-cart > header button {
  border: 0;
  background: transparent;
  font-size: 1.7rem;
}

.demo-hub-page .bake-cart > footer {
  margin-top: auto;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(59, 33, 24, 0.25);
}

.demo-hub-page .bake-cart > footer > div,
.demo-hub-page .bake-cart > footer label {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.demo-hub-page .bake-cart > footer label {
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .bake-cart > footer select {
  padding: 0.8rem;
  border: 1px solid #3b2118;
  background: transparent;
}

.demo-hub-page .bake-cart > footer > button {
  width: 100%;
  padding: 1rem;
  border: 0;
  border-radius: 999px;
  background: #d84122;
  color: #fff1d7;
  text-transform: uppercase;
}

.demo-hub-page .bake-cart__items {
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.demo-hub-page .bake-cart__items article {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(59, 33, 24, 0.2);
}

.demo-hub-page .bake-cart__items article div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .bake-cart__items article button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
}

.demo-hub-page .demo-site--florist {
  background: #f3f0e8;
  color: #20261b;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--florist h2,
.demo-hub-page .demo-site--florist h3 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: none;
}

.demo-hub-page .demo-site--florist a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--florist button,
.demo-hub-page .demo-site--florist input,
.demo-hub-page .demo-site--florist textarea {
  font: inherit;
}

.demo-hub-page .demo-site--florist img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .flower-site {
  position: relative;
  overflow: hidden;
  background: #f3f0e8;
}

.demo-hub-page .flower-nav {
  position: relative;
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(32, 38, 27, 0.25);
}

.demo-hub-page .flower-nav nav {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
}

.demo-hub-page .flower-nav nav:nth-of-type(2) {
  margin-left: auto;
}

.demo-hub-page .flower-nav nav a,
.demo-hub-page .flower-nav > button {
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .flower-nav > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.demo-hub-page .flower-nav > button span {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.demo-hub-page .flower-nav__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.4rem, 2.7vw, 2.6rem);
  text-transform: uppercase;
}

.demo-hub-page .flower-nav__brand i {
  color: #e2602b;
  font-style: italic;
  text-transform: none;
}

.demo-hub-page .flower-hero {
  position: relative;
  min-height: 58rem;
  color: #fff;
}

.demo-hub-page .flower-hero > figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .flower-hero > figure::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21, 31, 18, 0.7), rgba(21, 31, 18, 0.05) 72%);
  content: "";
}

.demo-hub-page .flower-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(67%, 72rem);
  min-height: 58rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 8vw, 9rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .flower-hero__copy > p,
.demo-hub-page .flower-hero__copy > small {
  margin: 0;
  font-size: 0.57rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.demo-hub-page .flower-hero__copy h2 {
  max-width: 68rem;
  margin: 1.5rem 0;
  font-size: clamp(5rem, 8.8vw, 10rem);
  line-height: 0.8;
}

.demo-hub-page .flower-hero__copy > span {
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.65;
}

.demo-hub-page .flower-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 2rem 0;
}

.demo-hub-page .flower-hero__copy > div a {
  padding: 0.9rem 1.2rem;
  border: 1px solid #fff;
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .flower-hero__copy > div a:first-child {
  background: #fff;
  color: #20261b;
}

.demo-hub-page .flower-marquee {
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0;
  background: #26361e;
  color: #f3f0e8;
  white-space: nowrap;
}

.demo-hub-page .flower-marquee span {
  font-size: 0.57rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.demo-hub-page .flower-marquee i {
  color: #e2602b;
  font-style: normal;
}

.demo-hub-page .flower-order,
.demo-hub-page .flower-shop,
.demo-hub-page .flower-delivery {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .flower-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .flower-heading > p {
  width: 9rem;
  flex: 0 0 9rem;
  margin: 0;
  color: #e2602b;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .flower-heading h3 {
  width: min(62%, 62rem);
  margin: 0;
  font-size: clamp(4rem, 7.5vw, 8rem);
  line-height: 0.88;
}

.demo-hub-page .flower-heading > span {
  width: min(22%, 23rem);
  line-height: 1.65;
}

.demo-hub-page .flower-occasions {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .flower-occasions article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
  border: 1px solid rgba(32, 38, 27, 0.28);
}

.demo-hub-page .flower-occasions article figure {
  aspect-ratio: 0.85;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .flower-occasions article > div {
  display: flex;
  min-height: 14rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
}

.demo-hub-page .flower-occasions article > div p {
  margin: 0 0 0.75rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2.2rem;
}

.demo-hub-page .flower-occasions article > div span {
  line-height: 1.55;
}

.demo-hub-page .flower-occasions article > div a {
  margin-top: auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .flower-shop {
  background: #dcd4de;
}

.demo-hub-page .flower-shop > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.demo-hub-page .flower-shop > header > div:first-child p {
  margin: 0;
  color: #e2602b;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .flower-shop > header h3 {
  margin: 0.75rem 0 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.9;
}

.demo-hub-page .flower-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.demo-hub-page .flower-filters button {
  padding: 0.55rem 0.85rem;
  border: 1px solid #20261b;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .flower-filters button.is-active {
  background: #20261b;
  color: #f3f0e8;
}

.demo-hub-page .flower-products {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.demo-hub-page .flower-products article {
  display: flex;
  width: calc(33.333% - 0.7rem);
  flex-direction: column;
}

.demo-hub-page .flower-products article[hidden] {
  display: none;
}

.demo-hub-page .flower-products article figure {
  position: relative;
  aspect-ratio: 0.9;
  margin: 0;
  overflow: hidden;
  border-radius: 45% 45% 0 0;
}

.demo-hub-page .flower-products article figure > span {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: #26361e;
  color: #f3f0e8;
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .flower-products article > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 1rem 0 2rem;
}

.demo-hub-page .flower-products article > div p {
  width: 70%;
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.demo-hub-page .flower-products article > div small {
  width: 70%;
  margin-top: 0.4rem;
  line-height: 1.45;
}

.demo-hub-page .flower-products article > div strong {
  width: 30%;
  text-align: right;
  font-weight: 500;
}

.demo-hub-page .flower-products article > div button {
  width: 100%;
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid #20261b;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .flower-products article > div button:hover {
  background: #20261b;
  color: #f3f0e8;
}

.demo-hub-page .flower-editorial {
  display: flex;
  min-height: 55rem;
  background: #26361e;
  color: #f3f0e8;
}

.demo-hub-page .flower-editorial figure {
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .flower-editorial .flower-editorial__large {
  width: 48%;
}

.demo-hub-page .flower-editorial > figure:last-child {
  width: 20%;
}

.demo-hub-page .flower-editorial > div {
  display: flex;
  width: 32%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5.5rem);
}

.demo-hub-page .flower-editorial > div p {
  margin: 0;
  color: #e7895d;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .flower-editorial > div h3 {
  margin: 1.5rem 0;
  font-size: clamp(3rem, 5.3vw, 6rem);
  line-height: 0.9;
}

.demo-hub-page .flower-editorial > div span {
  line-height: 1.65;
}

.demo-hub-page .flower-style {
  display: flex;
  min-height: 55rem;
}

.demo-hub-page .flower-style__copy {
  display: flex;
  width: 45%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .flower-style__copy p {
  margin: 0;
  color: #e2602b;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .flower-style__copy h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(5rem, 8vw, 9rem);
  line-height: 0.85;
}

.demo-hub-page .flower-style__copy span {
  max-width: 36rem;
  line-height: 1.65;
}

.demo-hub-page .flower-style__copy a {
  margin-top: 2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .flower-style__images {
  position: relative;
  display: flex;
  width: 55%;
  align-items: flex-end;
  background: #c3baa8;
}

.demo-hub-page .flower-style__images figure {
  width: 78%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .flower-style__images figure:last-child {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 35%;
  height: 43%;
  border: 0.5rem solid #c3baa8;
  border-radius: 50% 50% 0 0;
}

.demo-hub-page .flower-events {
  display: flex;
  min-height: 60rem;
  background: #e6a85e;
}

.demo-hub-page .flower-events__visual {
  position: relative;
  width: 48%;
}

.demo-hub-page .flower-events__visual figure {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .flower-events__visual > div {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  padding: 1.5rem;
  background: #f3f0e8;
}

.demo-hub-page .flower-events__visual > div p {
  margin: 0;
  color: #e2602b;
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .flower-events__visual > div h3 {
  margin: 0.75rem 0 0;
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  line-height: 0.9;
}

.demo-hub-page .flower-events form {
  display: flex;
  width: 52%;
  align-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .flower-events form > div,
.demo-hub-page .flower-events form .is-wide,
.demo-hub-page .flower-events form > button,
.demo-hub-page .flower-events form > small {
  width: 100%;
}

.demo-hub-page .flower-events form > div p {
  margin: 0;
  color: #9d3014;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .flower-events form > div h3 {
  margin: 1rem 0;
  font-size: clamp(3.5rem, 5.8vw, 6.6rem);
  line-height: 0.88;
}

.demo-hub-page .flower-events form label {
  display: flex;
  width: calc(50% - 0.6rem);
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .flower-events form label span {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .flower-events form input,
.demo-hub-page .flower-events form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 38, 27, 0.45);
  border-radius: 0;
  outline: 0;
  background: transparent;
}

.demo-hub-page .flower-events form > button {
  padding: 1rem;
  border: 0;
  background: #26361e;
  color: #f3f0e8;
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .flower-delivery__body {
  display: flex;
  min-height: 45rem;
  background: #dde1d2;
}

.demo-hub-page .flower-delivery__body > div,
.demo-hub-page .flower-delivery__body > figure {
  width: 50%;
}

.demo-hub-page .flower-delivery__body > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.demo-hub-page .flower-delivery__body > figure {
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .flower-delivery__body form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 2.5rem;
}

.demo-hub-page .flower-delivery__body form label {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .flower-delivery__body form label span {
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .flower-delivery__body form input {
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 38, 27, 0.5);
  background: transparent;
}

.demo-hub-page .flower-delivery__body form button {
  align-self: flex-end;
  padding: 0.85rem 1.25rem;
  border: 0;
  background: #26361e;
  color: #f3f0e8;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .flower-delivery__body form > p {
  width: 100%;
  margin: 0;
  font-size: 0.75rem;
}

.demo-hub-page .flower-delivery__body > div > div {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(32, 38, 27, 0.25);
}

.demo-hub-page .flower-delivery__body > div > div article {
  display: flex;
  gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(32, 38, 27, 0.25);
}

.demo-hub-page .flower-delivery__body > div > div article strong {
  width: 9rem;
  flex: 0 0 9rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
}

.demo-hub-page .flower-delivery__body > div > div article p {
  margin: 0;
  line-height: 1.5;
}

.demo-hub-page .flower-final {
  position: relative;
  min-height: 52rem;
  color: #fff;
}

.demo-hub-page .flower-final figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .flower-final figure::after {
  position: absolute;
  inset: 0;
  background: rgba(24, 35, 20, 0.48);
  content: "";
}

.demo-hub-page .flower-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 52rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
}

.demo-hub-page .flower-final > div p {
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .flower-final > div h3 {
  max-width: 75rem;
  margin: 1rem 0 2rem;
  font-size: clamp(4.5rem, 8.5vw, 9.5rem);
  line-height: 0.84;
}

.demo-hub-page .flower-final > div a {
  padding: 0.9rem 1.5rem;
  background: #fff;
  color: #20261b;
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .flower-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #26361e;
  color: #f3f0e8;
}

.demo-hub-page .flower-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .flower-footer > div:first-child {
  margin-right: auto;
}

.demo-hub-page .flower-footer strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
}

.demo-hub-page .flower-footer p,
.demo-hub-page .flower-footer a,
.demo-hub-page .flower-footer span {
  margin: 0;
  font-size: 0.57rem;
  letter-spacing: 0.07em;
}

.demo-hub-page .flower-footer p {
  color: #e7895d;
  text-transform: uppercase;
}

.demo-hub-page .flower-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  background: rgba(25, 35, 21, 0.55);
}

.demo-hub-page .flower-overlay[hidden] {
  display: none;
}

.demo-hub-page .flower-cart {
  position: fixed;
  z-index: 1201;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(34rem, 100%);
  flex-direction: column;
  padding: 1.5rem;
  background: #f3f0e8;
  color: #20261b;
  transform: translateX(105%);
  transition: transform 300ms ease;
}

.demo-hub-page .flower-cart.is-open {
  transform: translateX(0);
}

.demo-hub-page .flower-cart > header,
.demo-hub-page .flower-cart > footer,
.demo-hub-page .flower-cart article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.demo-hub-page .flower-cart > header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(32, 38, 27, 0.25);
}

.demo-hub-page .flower-cart > header p {
  margin: 0 0 0.3rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.demo-hub-page .flower-cart > header button {
  border: 0;
  background: transparent;
  font-size: 1.7rem;
}

.demo-hub-page .flower-cart > footer {
  margin-top: auto;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(32, 38, 27, 0.25);
}

.demo-hub-page .flower-cart > footer label,
.demo-hub-page .flower-cart > footer > div {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.demo-hub-page .flower-cart > footer label {
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .flower-cart > footer input {
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 38, 27, 0.4);
  background: transparent;
}

.demo-hub-page .flower-cart > footer p {
  margin: 0;
  font-size: 0.68rem;
}

.demo-hub-page .flower-cart > footer > button {
  width: 100%;
  padding: 1rem;
  border: 0;
  background: #26361e;
  color: #f3f0e8;
  text-transform: uppercase;
}

.demo-hub-page .flower-cart__items {
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.demo-hub-page .flower-cart__items article {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(32, 38, 27, 0.2);
}

.demo-hub-page .flower-cart__items article div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .flower-cart__items article button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
}

.demo-hub-page .demo-site--artist {
  background: #f4f2ec;
  color: #20201c;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--artist h2,
.demo-hub-page .demo-site--artist h3 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: none;
}

.demo-hub-page .demo-site--artist a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--artist button,
.demo-hub-page .demo-site--artist input,
.demo-hub-page .demo-site--artist textarea {
  font: inherit;
}

.demo-hub-page .demo-site--artist img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .artist-site {
  position: relative;
  overflow: hidden;
  background: #f4f2ec;
}

.demo-hub-page .artist-nav {
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(32, 32, 28, 0.25);
}

.demo-hub-page .artist-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.4vw, 2.6rem);
}

.demo-hub-page .artist-nav nav a,
.demo-hub-page .artist-nav > button {
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-nav > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.demo-hub-page .artist-nav > button span {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.demo-hub-page .artist-nav__brand {
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.4rem, 2.5vw, 2.4rem);
  text-transform: uppercase;
}

.demo-hub-page .artist-nav__brand i {
  color: #938f00;
  font-style: italic;
  text-transform: none;
}

.demo-hub-page .artist-hero {
  display: flex;
  min-height: 58rem;
}

.demo-hub-page .artist-hero__copy {
  display: flex;
  width: 47%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 7vw, 8rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .artist-hero__copy > p {
  margin: 0;
  color: #938f00;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-hero__copy h2 {
  margin: 1.5rem 0;
  font-size: clamp(4.7rem, 8vw, 9rem);
  line-height: 0.82;
}

.demo-hub-page .artist-hero__copy > span {
  max-width: 35rem;
  font-size: 1rem;
  line-height: 1.65;
}

.demo-hub-page .artist-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.demo-hub-page .artist-hero__copy > div a {
  padding: 0.9rem 1.2rem;
  border: 1px solid #20201c;
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .artist-hero__copy > div a:first-child {
  background: #20201c;
  color: #f4f2ec;
}

.demo-hub-page .artist-hero__gallery {
  position: relative;
  display: flex;
  width: 53%;
  align-items: flex-end;
  justify-content: flex-end;
  background: #c76340;
}

.demo-hub-page .artist-hero__gallery figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .artist-hero__gallery figure.is-main {
  inset: 0 18% 15% 0;
}

.demo-hub-page .artist-hero__gallery figure:nth-child(2) {
  z-index: 1;
  right: 3rem;
  bottom: 3rem;
  width: 35%;
  height: 42%;
  border: 0.5rem solid #c76340;
}

.demo-hub-page .artist-hero__gallery figure:nth-child(3) {
  z-index: 2;
  top: 3rem;
  right: 3rem;
  width: 25%;
  height: 25%;
  border: 0.5rem solid #c76340;
}

.demo-hub-page .artist-statement {
  display: flex;
  min-height: 35rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #dce95d;
}

.demo-hub-page .artist-statement > p {
  width: 15rem;
  margin: 0;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-statement h3 {
  width: min(62%, 65rem);
  margin: 0;
  font-size: clamp(3.5rem, 6.5vw, 7rem);
  line-height: 0.92;
}

.demo-hub-page .artist-statement > span {
  width: min(17%, 16rem);
  line-height: 1.6;
}

.demo-hub-page .artist-work,
.demo-hub-page .artist-originals {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .artist-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .artist-heading > p {
  width: 8rem;
  flex: 0 0 8rem;
  margin: 0;
  color: #938f00;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-heading h3 {
  width: min(64%, 62rem);
  margin: 0;
  font-size: clamp(4rem, 7.4vw, 8rem);
  line-height: 0.88;
}

.demo-hub-page .artist-heading > span {
  width: min(20%, 21rem);
  line-height: 1.65;
}

.demo-hub-page .artist-work__types {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .artist-work__types article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
}

.demo-hub-page .artist-work__types article figure {
  aspect-ratio: 0.78;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .artist-work__types article > div {
  display: flex;
  min-height: 13rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 0;
}

.demo-hub-page .artist-work__types article > div p {
  margin: 0 0 0.6rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2.2rem;
}

.demo-hub-page .artist-work__types article > div span {
  line-height: 1.55;
}

.demo-hub-page .artist-work__types article > div a {
  margin-top: auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .artist-originals {
  background: #dedbd3;
}

.demo-hub-page .artist-originals > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.demo-hub-page .artist-originals > header > div:first-child p {
  margin: 0;
  color: #938f00;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-originals > header > div:first-child h3 {
  margin: 0.75rem 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.9;
}

.demo-hub-page .artist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.demo-hub-page .artist-filters button {
  padding: 0.55rem 0.85rem;
  border: 1px solid #20201c;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .artist-filters button.is-active {
  background: #20201c;
  color: #f4f2ec;
}

.demo-hub-page .artist-products {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2rem);
}

.demo-hub-page .artist-product {
  display: flex;
  width: calc(33.333% - 1.35rem);
  flex-direction: column;
}

.demo-hub-page .artist-product[hidden] {
  display: none;
}

.demo-hub-page .artist-product figure {
  position: relative;
  aspect-ratio: 0.82;
  margin: 0;
  overflow: hidden;
  background: #f4f2ec;
}

.demo-hub-page .artist-product figure span {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.4rem 0.55rem;
  background: #dce95d;
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .artist-product > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 1rem 0 2rem;
}

.demo-hub-page .artist-product > div p {
  width: 70%;
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.demo-hub-page .artist-product > div small {
  width: 70%;
  margin-top: 0.4rem;
  line-height: 1.45;
}

.demo-hub-page .artist-product > div strong {
  width: 30%;
  text-align: right;
  font-weight: 500;
}

.demo-hub-page .artist-product > div button {
  width: 100%;
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid #20201c;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .artist-product > div button:hover {
  background: #20201c;
  color: #f4f2ec;
}

.demo-hub-page .artist-product--large {
  width: calc(66.666% - 0.7rem);
}

.demo-hub-page .artist-product--large figure {
  aspect-ratio: 1.45;
}

.demo-hub-page .artist-editorial {
  display: flex;
  min-height: 56rem;
  background: #30372e;
  color: #f4f2ec;
}

.demo-hub-page .artist-editorial > div {
  display: flex;
  width: 38%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .artist-editorial > div p {
  margin: 0;
  color: #dce95d;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-editorial > div h3 {
  margin: 1.5rem 0;
  font-size: clamp(3.5rem, 5.7vw, 6.5rem);
  line-height: 0.9;
}

.demo-hub-page .artist-editorial > div span {
  line-height: 1.65;
}

.demo-hub-page .artist-editorial > div a {
  margin-top: 2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .artist-editorial figure {
  width: 42%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .artist-editorial figure:last-child {
  width: 20%;
}

.demo-hub-page .artist-commissions {
  display: flex;
  min-height: 62rem;
  background: #c76340;
}

.demo-hub-page .artist-commissions__intro {
  display: flex;
  width: 46%;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .artist-commissions__intro > p {
  margin: 0;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-commissions__intro h3 {
  margin: 1.5rem 0;
  font-size: clamp(4rem, 6.5vw, 7.3rem);
  line-height: 0.88;
}

.demo-hub-page .artist-commissions__intro > span {
  max-width: 34rem;
  line-height: 1.65;
}

.demo-hub-page .artist-commissions__intro figure {
  width: 72%;
  aspect-ratio: 1.25;
  margin: auto 0 0 auto;
  overflow: hidden;
}

.demo-hub-page .artist-commissions form {
  display: flex;
  width: 54%;
  align-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: clamp(3rem, 6vw, 7rem);
  background: #f4f2ec;
}

.demo-hub-page .artist-commissions form > div,
.demo-hub-page .artist-commissions form .is-wide,
.demo-hub-page .artist-commissions form > button,
.demo-hub-page .artist-commissions form > small {
  width: 100%;
}

.demo-hub-page .artist-commissions form > div p {
  margin: 0;
  color: #938f00;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-commissions form > div h3 {
  margin: 1rem 0;
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: 0.9;
}

.demo-hub-page .artist-commissions form label {
  display: flex;
  width: calc(50% - 0.6rem);
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .artist-commissions form label span {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .artist-commissions form input,
.demo-hub-page .artist-commissions form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 32, 28, 0.4);
  border-radius: 0;
  outline: 0;
  background: transparent;
}

.demo-hub-page .artist-commissions form > button {
  padding: 1rem;
  border: 0;
  background: #20201c;
  color: #f4f2ec;
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .artist-about {
  display: flex;
  min-height: 54rem;
}

.demo-hub-page .artist-about__portrait {
  width: 52%;
  padding: clamp(2rem, 5vw, 5rem);
  background: #dce95d;
}

.demo-hub-page .artist-about__portrait figure {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .artist-about__copy {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .artist-about__copy p {
  margin: 0;
  color: #938f00;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .artist-about__copy h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(5rem, 8vw, 9rem);
  line-height: 0.85;
}

.demo-hub-page .artist-about__copy span {
  max-width: 38rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}

.demo-hub-page .artist-about__copy a {
  margin-top: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .artist-final {
  display: flex;
  min-height: 50rem;
  background: #20201c;
  color: #f4f2ec;
}

.demo-hub-page .artist-final > div {
  display: flex;
  width: 58%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .artist-final > div > p {
  margin: 0;
  color: #dce95d;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .artist-final > div h3 {
  margin: 1.5rem 0;
  font-size: clamp(5rem, 8vw, 9rem);
  line-height: 0.84;
}

.demo-hub-page .artist-final > div > span {
  font-size: 1rem;
}

.demo-hub-page .artist-final > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.demo-hub-page .artist-final > div > div a {
  padding: 0.9rem 1.2rem;
  border: 1px solid #f4f2ec;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .artist-final > div > div a:first-child {
  background: #f4f2ec;
  color: #20201c;
}

.demo-hub-page .artist-final figure {
  width: 42%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .artist-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .artist-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .artist-footer > div:first-child {
  margin-right: auto;
}

.demo-hub-page .artist-footer strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
}

.demo-hub-page .artist-footer p,
.demo-hub-page .artist-footer a,
.demo-hub-page .artist-footer span {
  margin: 0;
  font-size: 0.57rem;
  letter-spacing: 0.07em;
}

.demo-hub-page .artist-footer p {
  color: #938f00;
  text-transform: uppercase;
}

.demo-hub-page .artist-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  background: rgba(25, 25, 22, 0.55);
}

.demo-hub-page .artist-overlay[hidden] {
  display: none;
}

.demo-hub-page .artist-cart {
  position: fixed;
  z-index: 1201;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(34rem, 100%);
  flex-direction: column;
  padding: 1.5rem;
  background: #f4f2ec;
  color: #20201c;
  transform: translateX(105%);
  transition: transform 300ms ease;
}

.demo-hub-page .artist-cart.is-open {
  transform: translateX(0);
}

.demo-hub-page .artist-cart > header,
.demo-hub-page .artist-cart > footer,
.demo-hub-page .artist-cart article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.demo-hub-page .artist-cart > header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(32, 32, 28, 0.25);
}

.demo-hub-page .artist-cart > header p {
  margin: 0 0 0.3rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.demo-hub-page .artist-cart > header button {
  border: 0;
  background: transparent;
  font-size: 1.7rem;
}

.demo-hub-page .artist-cart > footer {
  margin-top: auto;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(32, 32, 28, 0.25);
}

.demo-hub-page .artist-cart > footer > div {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.demo-hub-page .artist-cart > footer p {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.5;
}

.demo-hub-page .artist-cart > footer > button {
  width: 100%;
  padding: 1rem;
  border: 0;
  background: #20201c;
  color: #f4f2ec;
  text-transform: uppercase;
}

.demo-hub-page .artist-cart__items {
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.demo-hub-page .artist-cart__items article {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(32, 32, 28, 0.2);
}

.demo-hub-page .artist-cart__items article div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .artist-cart__items article button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
}

.demo-hub-page .demo-site--designer {
  background: #f2e9d7;
  color: #1b1917;
  font-family: "GC Neue Machine", Arial, sans-serif;
}

.demo-hub-page .demo-site--designer h2,
.demo-hub-page .demo-site--designer h3,
.demo-hub-page .demo-site--designer h4,
.demo-hub-page .demo-site--designer p,
.demo-hub-page .demo-site--designer figure,
.demo-hub-page .demo-site--designer blockquote {
  margin: 0;
}

.demo-hub-page .demo-site--designer h2,
.demo-hub-page .demo-site--designer h3,
.demo-hub-page .demo-site--designer h4 {
  font-weight: 400;
  letter-spacing: -0.065em;
  text-transform: none;
}

.demo-hub-page .demo-site--designer a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--designer button,
.demo-hub-page .demo-site--designer input,
.demo-hub-page .demo-site--designer select,
.demo-hub-page .demo-site--designer textarea {
  font: inherit;
}

.demo-hub-page .demo-site--designer button,
.demo-hub-page .demo-site--designer a {
  cursor: pointer;
}

.demo-hub-page .demo-site--designer img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--designer [hidden] {
  display: none !important;
}

.demo-hub-page .designer-site {
  overflow: hidden;
  background: #f8f2e7;
}

.demo-hub-page .designer-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 5.4rem;
  align-items: center;
  gap: 2rem;
  padding: 0 4rem;
  border-bottom: 1px solid rgba(27, 25, 23, 0.18);
  background: rgba(248, 242, 231, 0.94);
  backdrop-filter: blur(14px);
}

.demo-hub-page .designer-nav nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin-left: auto;
}

.demo-hub-page .designer-nav nav a {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .designer-nav > a:last-child {
  padding: 0.8rem 1.15rem;
  border: 1px solid #1b1917;
  border-radius: 4rem;
  background: #ff6334;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .designer-brand {
  display: flex;
  min-width: 10rem;
  flex-direction: column;
  line-height: 1;
}

.demo-hub-page .designer-brand strong {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.demo-hub-page .designer-brand span {
  margin-top: 0.25rem;
  color: #d8431c;
  font-size: 0.48rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.demo-hub-page .designer-hero {
  position: relative;
  display: flex;
  min-height: 50rem;
  padding: 3rem 4rem 4rem;
  gap: 1rem;
  background: #ff6334;
}

.demo-hub-page .designer-hero__copy {
  display: flex;
  width: 55%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-right: 2rem;
}

.demo-hub-page .designer-hero__copy > p {
  margin-bottom: 1.3rem;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.demo-hub-page .designer-hero__copy h2 {
  max-width: 58rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 8vw, 8.7rem);
  line-height: 0.82;
}

.demo-hub-page .designer-hero__copy h2 em {
  display: block;
  color: #f8f2e7;
  font-weight: 400;
}

.demo-hub-page .designer-hero__copy > span {
  max-width: 35rem;
  margin: 2rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.demo-hub-page .designer-hero__copy > div {
  display: flex;
  gap: 0.75rem;
}

.demo-hub-page .designer-hero__copy > div a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.7rem 1.15rem;
  border: 1px solid #1b1917;
  border-radius: 4rem;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .designer-hero__copy > div a:first-child {
  background: #1b1917;
  color: #fff;
}

.demo-hub-page .designer-hero__image {
  position: relative;
  width: 45%;
  overflow: hidden;
  border-radius: 14rem 14rem 0.35rem 0.35rem;
}

.demo-hub-page .designer-hero__image figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(27, 25, 23, 0.28);
  background: rgba(248, 242, 231, 0.88);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-style: italic;
  text-align: center;
}

.demo-hub-page .designer-hero > aside {
  position: absolute;
  right: 2.2rem;
  bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: right bottom;
}

.demo-hub-page .designer-hero > aside span,
.demo-hub-page .designer-hero > aside b {
  display: inline-flex;
  min-height: 1.8rem;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border: 1px solid #1b1917;
  border-radius: 3rem;
  font-size: 0.5rem;
  font-weight: 400;
  text-transform: uppercase;
}

.demo-hub-page .designer-marquee {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
  gap: 1.5rem;
  padding: 1rem 2rem;
  background: #1b1917;
  color: #f8f2e7;
  white-space: nowrap;
}

.demo-hub-page .designer-marquee span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
}

.demo-hub-page .designer-marquee i {
  color: #ff6334;
}

.demo-hub-page .designer-work,
.demo-hub-page .designer-services,
.demo-hub-page .designer-fit,
.demo-hub-page .designer-process,
.demo-hub-page .designer-pricing,
.demo-hub-page .designer-project {
  padding: 7rem 4rem;
}

.demo-hub-page .designer-work {
  background: #f8f2e7;
}

.demo-hub-page .designer-work > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.demo-hub-page .designer-work > header p {
  width: 18%;
  color: #d8431c;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .designer-work > header h3 {
  width: 52%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 5.5vw, 6.2rem);
  line-height: 0.87;
}

.demo-hub-page .designer-work > header span {
  width: 30%;
  color: #655f57;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .designer-work__tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.demo-hub-page .designer-work__tabs button {
  padding: 0.65rem 1rem;
  border: 1px solid rgba(27, 25, 23, 0.28);
  border-radius: 4rem;
  background: transparent;
  color: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-hub-page .designer-work__tabs button:hover,
.demo-hub-page .designer-work__tabs button.is-active {
  background: #1b1917;
  color: #fff;
}

.demo-hub-page .designer-case {
  display: flex;
  min-height: 46rem;
  gap: 1rem;
}

.demo-hub-page .designer-case__copy,
.demo-hub-page .designer-case__images {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .designer-case__copy {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: #1b1917;
  color: #fff;
}

.demo-hub-page .designer-case__copy > span {
  color: #ff6334;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .designer-case__copy h4 {
  margin: 1rem 0 3rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.7rem);
  line-height: 0.88;
}

.demo-hub-page .designer-case__copy > div {
  display: flex;
  flex-wrap: wrap;
}

.demo-hub-page .designer-case__copy > div article {
  width: 50%;
  min-height: 10rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.demo-hub-page .designer-case__copy > div article b {
  color: #ff936f;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .designer-case__copy > div article p {
  margin-top: 0.8rem;
  color: #ddd6cc;
  font-size: 0.67rem;
  line-height: 1.55;
}

.demo-hub-page .designer-case__copy > small {
  margin-top: auto;
  padding-top: 1rem;
  color: #aaa39a;
  font-size: 0.55rem;
}

.demo-hub-page .designer-case__images {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .designer-case__images figure:first-child {
  width: 67%;
}

.demo-hub-page .designer-case__images figure:last-child {
  width: 33%;
}

.demo-hub-page .designer-services {
  background: #bed5ff;
}

.demo-hub-page .designer-services > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .designer-services > header p {
  width: 25%;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .designer-services > header h3 {
  max-width: 58rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 5.5vw, 6.2rem);
  line-height: 0.87;
}

.demo-hub-page .designer-services > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .designer-services > div article {
  display: flex;
  width: calc(33.333% - 0.667rem);
  min-height: 33rem;
  flex-direction: column;
  padding: 1.2rem;
  border: 1px solid rgba(27, 25, 23, 0.25);
  border-radius: 10rem 10rem 0.25rem 0.25rem;
  background: #f8f2e7;
}

.demo-hub-page .designer-services > div article > span {
  margin: 1.5rem 0 0.8rem;
  color: #d8431c;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .designer-services > div article h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
}

.demo-hub-page .designer-services > div article > p {
  min-height: 3.5rem;
  margin: 0.7rem 0 1.2rem;
  color: #655f57;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .designer-services > div article figure {
  height: 14rem;
  margin-top: auto;
  overflow: hidden;
}

.demo-hub-page .designer-services > div article button {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .designer-fit {
  display: flex;
  gap: 4rem;
  background: #f8f2e7;
}

.demo-hub-page .designer-fit__intro,
.demo-hub-page .designer-fit__list {
  width: calc(50% - 2rem);
}

.demo-hub-page .designer-fit__intro {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .designer-fit__intro > p {
  margin-bottom: 1rem;
  color: #d8431c;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .designer-fit__intro h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 5.5vw, 6.2rem);
  line-height: 0.87;
}

.demo-hub-page .designer-fit__intro figure {
  min-height: 19rem;
  margin-top: 2.5rem;
}

.demo-hub-page .designer-fit__list {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .designer-fit__list button {
  display: flex;
  min-height: 9rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.2rem;
  border: 0;
  border-bottom: 1px solid rgba(27, 25, 23, 0.22);
  background: transparent;
  color: inherit;
  text-align: left;
}

.demo-hub-page .designer-fit__list button b {
  width: 55%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 400;
}

.demo-hub-page .designer-fit__list button span {
  width: 35%;
  color: #655f57;
  font-size: 0.67rem;
  line-height: 1.45;
}

.demo-hub-page .designer-fit__list button i {
  width: 10%;
  color: #d8431c;
  font-size: 1.6rem;
  font-style: normal;
  text-align: right;
}

.demo-hub-page .designer-fit__list button:hover,
.demo-hub-page .designer-fit__list button.is-active {
  background: #ff6334;
}

.demo-hub-page .designer-fit__list button.is-active span {
  color: #1b1917;
}

.demo-hub-page .designer-fit__list > p {
  margin-top: auto;
  padding: 1.2rem;
  background: #1b1917;
  color: #fff;
  font-size: 0.68rem;
  line-height: 1.5;
}

.demo-hub-page .designer-process {
  display: flex;
  gap: 4rem;
  background: #1b1917;
  color: #fff;
}

.demo-hub-page .designer-process > header,
.demo-hub-page .designer-process > div {
  width: calc(50% - 2rem);
}

.demo-hub-page .designer-process > header {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .designer-process > header p {
  margin-bottom: 1rem;
  color: #ff6334;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .designer-process > header h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 5.5vw, 6.2rem);
  line-height: 0.87;
}

.demo-hub-page .designer-process > header > span {
  max-width: 32rem;
  margin-top: auto;
  padding: 1.4rem;
  background: #ff6334;
  color: #1b1917;
  font-size: 0.78rem;
  line-height: 1.55;
}

.demo-hub-page .designer-process > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .designer-process > div button {
  display: flex;
  min-height: 7.6rem;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #fff;
  text-align: left;
}

.demo-hub-page .designer-process > div button b {
  color: #ff6334;
  font-size: 0.58rem;
  font-weight: 400;
}

.demo-hub-page .designer-process > div button span {
  width: 55%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
}

.demo-hub-page .designer-process > div button small {
  margin-left: auto;
  color: #aaa39a;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.demo-hub-page .designer-process > div button:hover span,
.demo-hub-page .designer-process > div button.is-active span {
  color: #ff6334;
}

.demo-hub-page .designer-pricing {
  display: flex;
  gap: 4rem;
  background: #f5de65;
}

.demo-hub-page .designer-pricing > div {
  width: calc(50% - 2rem);
}

.demo-hub-page .designer-pricing > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.demo-hub-page .designer-pricing > div:first-child > p {
  margin-bottom: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .designer-pricing > div:first-child h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 5.5vw, 6.2rem);
  line-height: 0.87;
}

.demo-hub-page .designer-pricing > div:first-child > span {
  margin-top: 1.5rem;
  font-size: 0.75rem;
}

.demo-hub-page .designer-pricing > div:first-child > a {
  margin-top: auto;
  padding: 0.85rem 1.1rem;
  border: 1px solid #1b1917;
  border-radius: 4rem;
  background: #1b1917;
  color: #fff;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .designer-pricing > div:last-child {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .designer-pricing > div:last-child article {
  min-height: 15rem;
  padding: 1.5rem;
  border: 1px solid rgba(27, 25, 23, 0.25);
  background: #f8f2e7;
}

.demo-hub-page .designer-pricing > div:last-child article:last-child {
  margin-top: -1px;
  background: #ff6334;
}

.demo-hub-page .designer-pricing > div:last-child article span {
  display: block;
  margin-bottom: 2rem;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .designer-pricing > div:last-child article strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
}

.demo-hub-page .designer-pricing > div:last-child article p {
  max-width: 27rem;
  margin-top: 1rem;
  font-size: 0.68rem;
  line-height: 1.5;
}

.demo-hub-page .designer-project {
  display: flex;
  gap: 1rem;
  background: #f8f2e7;
}

.demo-hub-page .designer-project > div,
.demo-hub-page .designer-project > form {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .designer-project > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .designer-project > div > p {
  margin-bottom: 1rem;
  color: #d8431c;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .designer-project > div h3 {
  max-width: 43rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 6vw, 6.7rem);
  line-height: 0.86;
}

.demo-hub-page .designer-project > div figure {
  min-height: 22rem;
  margin-top: 2.5rem;
}

.demo-hub-page .designer-project > form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem;
  background: #bed5ff;
}

.demo-hub-page .designer-project > form > div {
  display: flex;
  gap: 0.9rem;
}

.demo-hub-page .designer-project > form > div label {
  width: 50%;
}

.demo-hub-page .designer-project > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .designer-project > form label span {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .designer-project > form input,
.demo-hub-page .designer-project > form select,
.demo-hub-page .designer-project > form textarea {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid rgba(27, 25, 23, 0.24);
  border-radius: 0;
  background: #fff;
  color: inherit;
  font-size: 0.72rem;
}

.demo-hub-page .designer-project > form > button {
  min-height: 3.4rem;
  border: 0;
  background: #1b1917;
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .designer-project > form aside {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px solid rgba(27, 25, 23, 0.25);
  background: #f8f2e7;
}

.demo-hub-page .designer-project > form aside strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.demo-hub-page .designer-project > form aside span,
.demo-hub-page .designer-project > form aside p,
.demo-hub-page .designer-project > form aside small {
  font-size: 0.65rem;
  line-height: 1.45;
}

.demo-hub-page .designer-footer {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem;
  background: #ff6334;
}

.demo-hub-page .designer-footer > a {
  width: 27%;
}

.demo-hub-page .designer-footer > div {
  display: flex;
  width: 18%;
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .designer-footer > div p {
  margin-bottom: 0.4rem;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .designer-footer > div a {
  font-size: 0.65rem;
}

.demo-hub-page .designer-footer blockquote {
  margin-left: auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.3;
  text-align: right;
}@media (max-width: 820px) {
  .demo-hub-page .demo-site--designer .designer-nav {
    padding: 0 1.5rem;
  }
  .demo-hub-page .demo-site--designer .designer-nav nav {
    display: none;
  }
  .demo-hub-page .demo-site--designer .designer-nav > a:last-child {
    margin-left: auto;
  }
  .demo-hub-page .demo-site--designer .designer-hero,
  .demo-hub-page .demo-site--designer .designer-work > header,
  .demo-hub-page .demo-site--designer .designer-case,
  .demo-hub-page .demo-site--designer .designer-services > header,
  .demo-hub-page .demo-site--designer .designer-fit,
  .demo-hub-page .demo-site--designer .designer-process,
  .demo-hub-page .demo-site--designer .designer-pricing,
  .demo-hub-page .demo-site--designer .designer-project {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--designer .designer-hero {
    padding: 3rem 1.5rem;
  }
  .demo-hub-page .demo-site--designer .designer-hero__copy,
  .demo-hub-page .demo-site--designer .designer-hero__image,
  .demo-hub-page .demo-site--designer .designer-work > header p,
  .demo-hub-page .demo-site--designer .designer-work > header h3,
  .demo-hub-page .demo-site--designer .designer-work > header span,
  .demo-hub-page .demo-site--designer .designer-case__copy,
  .demo-hub-page .demo-site--designer .designer-case__images,
  .demo-hub-page .demo-site--designer .designer-services > header p,
  .demo-hub-page .demo-site--designer .designer-fit__intro,
  .demo-hub-page .demo-site--designer .designer-fit__list,
  .demo-hub-page .demo-site--designer .designer-process > header,
  .demo-hub-page .demo-site--designer .designer-process > div,
  .demo-hub-page .demo-site--designer .designer-pricing > div,
  .demo-hub-page .demo-site--designer .designer-project > div,
  .demo-hub-page .demo-site--designer .designer-project > form {
    width: 100%;
  }
  .demo-hub-page .demo-site--designer .designer-hero__image {
    min-height: 38rem;
  }
  .demo-hub-page .demo-site--designer .designer-hero > aside {
    display: none;
  }
  .demo-hub-page .demo-site--designer .designer-work,
  .demo-hub-page .demo-site--designer .designer-services,
  .demo-hub-page .demo-site--designer .designer-fit,
  .demo-hub-page .demo-site--designer .designer-process,
  .demo-hub-page .demo-site--designer .designer-pricing,
  .demo-hub-page .demo-site--designer .designer-project {
    padding: 5rem 1.5rem;
  }
  .demo-hub-page .demo-site--designer .designer-case__images {
    min-height: 32rem;
  }
  .demo-hub-page .demo-site--designer .designer-services > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--designer .designer-services > div article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .demo-site--designer .designer-fit__list > p,
  .demo-hub-page .demo-site--designer .designer-process > header > span,
  .demo-hub-page .demo-site--designer .designer-pricing > div:first-child > a {
    margin-top: 2rem;
  }
  .demo-hub-page .demo-site--designer .designer-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--designer .designer-footer > a {
    width: 100%;
  }}@media (max-width: 560px) {
  .demo-hub-page .demo-site--designer .designer-nav {
    min-height: 4.8rem;
    padding: 0 1rem;
  }
  .demo-hub-page .demo-site--designer .designer-nav > a:last-child {
    padding: 0.6rem 0.75rem;
    font-size: 0.47rem;
  }
  .demo-hub-page .demo-site--designer .designer-hero {
    padding: 2.5rem 1rem;
  }
  .demo-hub-page .demo-site--designer .designer-hero__copy h2 {
    font-size: 3.55rem;
  }
  .demo-hub-page .demo-site--designer .designer-hero__copy > div {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--designer .designer-hero__image {
    min-height: 30rem;
  }
  .demo-hub-page .demo-site--designer .designer-marquee {
    justify-content: flex-start;
  }
  .demo-hub-page .demo-site--designer .designer-work,
  .demo-hub-page .demo-site--designer .designer-services,
  .demo-hub-page .demo-site--designer .designer-fit,
  .demo-hub-page .demo-site--designer .designer-process,
  .demo-hub-page .demo-site--designer .designer-pricing,
  .demo-hub-page .demo-site--designer .designer-project {
    padding: 4rem 1rem;
  }
  .demo-hub-page .demo-site--designer .designer-work__tabs {
    overflow-x: auto;
  }
  .demo-hub-page .demo-site--designer .designer-case__copy {
    padding: 1.2rem;
  }
  .demo-hub-page .demo-site--designer .designer-case__copy > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--designer .designer-case__copy > div article {
    width: 100%;
  }
  .demo-hub-page .demo-site--designer .designer-case__images {
    min-height: 38rem;
    flex-direction: column;
  }
  .demo-hub-page .demo-site--designer .designer-case__images figure:first-child,
  .demo-hub-page .demo-site--designer .designer-case__images figure:last-child {
    width: 100%;
    min-height: 18rem;
  }
  .demo-hub-page .demo-site--designer .designer-services > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--designer .designer-services > div article {
    width: 100%;
  }
  .demo-hub-page .demo-site--designer .designer-fit__list button b {
    width: 85%;
  }
  .demo-hub-page .demo-site--designer .designer-fit__list button span {
    width: 85%;
    margin-top: 0.5rem;
  }
  .demo-hub-page .demo-site--designer .designer-fit__list button i {
    width: 15%;
  }
  .demo-hub-page .demo-site--designer .designer-process > div button {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--designer .designer-process > div button span {
    width: auto;
  }
  .demo-hub-page .demo-site--designer .designer-process > div button small {
    width: 100%;
    margin-left: 1.8rem;
  }
  .demo-hub-page .demo-site--designer .designer-project > form {
    padding: 1.2rem;
  }
  .demo-hub-page .demo-site--designer .designer-project > form > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--designer .designer-project > form > div label {
    width: 100%;
  }
  .demo-hub-page .demo-site--designer .designer-footer {
    flex-direction: column;
    padding: 3rem 1rem;
  }
  .demo-hub-page .demo-site--designer .designer-footer > div,
  .demo-hub-page .demo-site--designer .designer-footer blockquote {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }}
.demo-hub-page .professional-mode-switch {
  position: sticky;
  z-index: 9;
  top: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: #392d2b;
  color: #fff;
}

.demo-hub-page .professional-mode-switch span {
  margin-right: 0.5rem;
  color: #d7c8c0;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .professional-mode-switch button {
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 3rem;
  background: transparent;
  color: #fff;
  font-size: 0.52rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .professional-mode-switch button:hover,
.demo-hub-page .professional-mode-switch button.is-active {
  border-color: #daa8ae;
  background: #daa8ae;
  color: #382b29;
}

.demo-hub-page .demo-site--bookkeeper {
  background: #e5ece9;
  color: #123532;
  font-family: "GC Neue Machine", Arial, sans-serif;
}

.demo-hub-page .demo-site--bookkeeper h2,
.demo-hub-page .demo-site--bookkeeper h3,
.demo-hub-page .demo-site--bookkeeper h4,
.demo-hub-page .demo-site--bookkeeper p,
.demo-hub-page .demo-site--bookkeeper figure,
.demo-hub-page .demo-site--bookkeeper blockquote {
  margin: 0;
}

.demo-hub-page .demo-site--bookkeeper h2,
.demo-hub-page .demo-site--bookkeeper h3,
.demo-hub-page .demo-site--bookkeeper h4 {
  font-weight: 400;
  letter-spacing: -0.055em;
  text-transform: none;
}

.demo-hub-page .demo-site--bookkeeper a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--bookkeeper button,
.demo-hub-page .demo-site--bookkeeper input,
.demo-hub-page .demo-site--bookkeeper select,
.demo-hub-page .demo-site--bookkeeper textarea {
  font: inherit;
}

.demo-hub-page .demo-site--bookkeeper button,
.demo-hub-page .demo-site--bookkeeper a {
  cursor: pointer;
}

.demo-hub-page .demo-site--bookkeeper img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--bookkeeper [hidden] {
  display: none !important;
}

.demo-hub-page .bookkeeper-site {
  overflow: hidden;
  background: #f6f5ef;
}

.demo-hub-page .bookkeeper-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: 2rem;
  padding: 0 4rem;
  border-bottom: 1px solid rgba(18, 53, 50, 0.18);
  background: rgba(246, 245, 239, 0.95);
  backdrop-filter: blur(14px);
}

.demo-hub-page .bookkeeper-nav nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
}

.demo-hub-page .bookkeeper-nav nav a {
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-nav > a:last-child {
  padding: 0.8rem 1.15rem;
  border-radius: 4rem;
  background: #123532;
  color: #fff;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-brand {
  display: flex;
  min-width: 12rem;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.65rem;
  column-gap: 0.65rem;
  line-height: 1;
}

.demo-hub-page .bookkeeper-brand > span {
  display: inline-flex;
  width: 2.2rem;
  height: 2.2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #b9e78d;
  color: #123532;
  font-size: 0.62rem;
}

.demo-hub-page .bookkeeper-brand strong {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-brand small {
  width: 100%;
  padding-left: 2.85rem;
  color: #44716b;
  font-size: 0.47rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-hero {
  display: flex;
  min-height: 50rem;
  background: #123532;
  color: #fff;
}

.demo-hub-page .bookkeeper-hero > figure {
  position: relative;
  width: 48%;
}

.demo-hub-page .bookkeeper-hero > figure figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.9rem;
  background: rgba(246, 245, 239, 0.9);
  color: #123532;
  font-size: 0.65rem;
  text-align: center;
}

.demo-hub-page .bookkeeper-hero__copy {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem 4rem;
}

.demo-hub-page .bookkeeper-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #b9e78d;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-hero__copy h2 {
  max-width: 58rem;
  font-size: clamp(4rem, 7vw, 7.8rem);
  line-height: 0.85;
}

.demo-hub-page .bookkeeper-hero__copy h2 em {
  display: block;
  color: #b9e78d;
  font-style: normal;
}

.demo-hub-page .bookkeeper-hero__copy > span {
  max-width: 40rem;
  margin: 2rem 0;
  color: #d5e3df;
  font-size: 0.86rem;
  line-height: 1.65;
}

.demo-hub-page .bookkeeper-hero__copy > div {
  display: flex;
  gap: 0.8rem;
}

.demo-hub-page .bookkeeper-hero__copy > div a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4rem;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-hero__copy > div a:first-child {
  border-color: #b9e78d;
  background: #b9e78d;
  color: #123532;
}

.demo-hub-page .bookkeeper-hero__copy aside {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.demo-hub-page .bookkeeper-hero__copy aside b {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4rem;
  font-size: 0.55rem;
  font-weight: 400;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-boundary {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem 4rem;
  background: #b9e78d;
}

.demo-hub-page .bookkeeper-boundary strong {
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-boundary span {
  font-size: 0.64rem;
}

.demo-hub-page .bookkeeper-problem,
.demo-hub-page .bookkeeper-services,
.demo-hub-page .bookkeeper-report,
.demo-hub-page .bookkeeper-process,
.demo-hub-page .bookkeeper-pricing,
.demo-hub-page .bookkeeper-trust,
.demo-hub-page .bookkeeper-call {
  padding: 7rem 4rem;
}

.demo-hub-page .bookkeeper-problem {
  background: #f6f5ef;
}

.demo-hub-page .bookkeeper-problem > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .bookkeeper-problem > header p {
  width: 18%;
  color: #32746c;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-problem > header h3 {
  width: 57%;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .bookkeeper-problem > header span {
  width: 25%;
  color: #687872;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .bookkeeper-problem > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.demo-hub-page .bookkeeper-problem > div button {
  display: flex;
  width: calc(33.333% - 0.5rem);
  min-height: 11rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.4rem;
  border: 1px solid rgba(18, 53, 50, 0.2);
  background: #e7efec;
  color: inherit;
  text-align: left;
}

.demo-hub-page .bookkeeper-problem > div button:nth-child(even) {
  background: #dce7ff;
}

.demo-hub-page .bookkeeper-problem > div button:hover,
.demo-hub-page .bookkeeper-problem > div button.is-active {
  background: #123532;
  color: #fff;
}

.demo-hub-page .bookkeeper-problem > div button b {
  font-size: 1.18rem;
  font-weight: 400;
}

.demo-hub-page .bookkeeper-problem > div button span {
  font-size: 0.66rem;
  line-height: 1.45;
}

.demo-hub-page .bookkeeper-problem > aside {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.75rem;
  padding: 1.2rem;
  background: #b9e78d;
}

.demo-hub-page .bookkeeper-problem > aside span {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-problem > aside strong {
  font-size: 0.82rem;
  font-weight: 400;
}

.demo-hub-page .bookkeeper-services {
  background: #dce7ff;
}

.demo-hub-page .bookkeeper-services > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .bookkeeper-services > header p {
  width: 23%;
  color: #295c92;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-services > header h3 {
  max-width: 60rem;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .bookkeeper-services > div {
  display: flex;
  gap: 0.8rem;
}

.demo-hub-page .bookkeeper-services > div article {
  display: flex;
  width: calc(25% - 0.6rem);
  min-height: 33rem;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid rgba(18, 53, 50, 0.2);
  background: #f6f5ef;
  transition: transform 180ms ease;
}

.demo-hub-page .bookkeeper-services > div article.is-selected {
  transform: translateY(-0.45rem);
  box-shadow: inset 0 0 0 3px #32746c;
}

.demo-hub-page .bookkeeper-services > div article > span {
  color: #32746c;
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-services > div article h4 {
  margin-top: 2rem;
  font-size: 1.55rem;
  line-height: 1;
}

.demo-hub-page .bookkeeper-services > div article > p {
  min-height: 4rem;
  margin: 0.7rem 0 1rem;
  color: #687872;
  font-size: 0.67rem;
  line-height: 1.5;
}

.demo-hub-page .bookkeeper-services > div article figure {
  height: 13rem;
  margin-top: auto;
  overflow: hidden;
}

.demo-hub-page .bookkeeper-services > div article button {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.53rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-report {
  display: flex;
  gap: 4rem;
  background: #123532;
  color: #fff;
}

.demo-hub-page .bookkeeper-report > div {
  width: calc(50% - 2rem);
}

.demo-hub-page .bookkeeper-report > div:first-child {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .bookkeeper-report > div:first-child > p {
  margin-bottom: 1rem;
  color: #b9e78d;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-report > div:first-child h3 {
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .bookkeeper-report > div:first-child span {
  max-width: 35rem;
  margin-top: 2rem;
  color: #d5e3df;
  font-size: 0.75rem;
  line-height: 1.55;
}

.demo-hub-page .bookkeeper-report > div:last-child {
  display: flex;
  flex-wrap: wrap;
}

.demo-hub-page .bookkeeper-report > div:last-child article {
  width: 50%;
  min-height: 13rem;
  padding: 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-hub-page .bookkeeper-report > div:last-child article:nth-child(2),
.demo-hub-page .bookkeeper-report > div:last-child article:nth-child(3) {
  background: #174843;
}

.demo-hub-page .bookkeeper-report > div:last-child article span {
  color: #b9e78d;
  font-size: 0.54rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-report > div:last-child article b {
  display: block;
  margin-top: 3rem;
  font-size: 1.2rem;
  font-weight: 400;
}

.demo-hub-page .bookkeeper-report > div:last-child article p {
  margin-top: 0.6rem;
  color: #d5e3df;
  font-size: 0.64rem;
  line-height: 1.45;
}

.demo-hub-page .bookkeeper-process {
  display: flex;
  gap: 4rem;
  background: #e7efec;
}

.demo-hub-page .bookkeeper-process > header,
.demo-hub-page .bookkeeper-process > div {
  width: calc(50% - 2rem);
}

.demo-hub-page .bookkeeper-process > header {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .bookkeeper-process > header > p {
  margin-bottom: 1rem;
  color: #32746c;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-process > header h3 {
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .bookkeeper-process > header > span {
  margin-top: auto;
  padding: 1.4rem;
  background: #123532;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.55;
}

.demo-hub-page .bookkeeper-process > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .bookkeeper-process > div button {
  display: flex;
  min-height: 7rem;
  align-items: center;
  gap: 1.3rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(18, 53, 50, 0.22);
  background: transparent;
  color: inherit;
  text-align: left;
}

.demo-hub-page .bookkeeper-process > div button b {
  color: #32746c;
  font-size: 0.58rem;
  font-weight: 400;
}

.demo-hub-page .bookkeeper-process > div button span {
  width: 55%;
  font-size: 1.9rem;
}

.demo-hub-page .bookkeeper-process > div button small {
  margin-left: auto;
  color: #687872;
  font-size: 0.53rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-process > div button:hover span,
.demo-hub-page .bookkeeper-process > div button.is-active span {
  color: #32746c;
}

.demo-hub-page .bookkeeper-pricing {
  display: flex;
  min-height: 42rem;
  padding: 0;
  background: #b9e78d;
}

.demo-hub-page .bookkeeper-pricing > div,
.demo-hub-page .bookkeeper-pricing > figure {
  width: 50%;
}

.demo-hub-page .bookkeeper-pricing > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem;
}

.demo-hub-page .bookkeeper-pricing > div > p {
  margin-bottom: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-pricing > div h3 {
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .bookkeeper-pricing > div strong {
  margin-top: 2rem;
  font-size: 1.8rem;
  font-weight: 400;
}

.demo-hub-page .bookkeeper-pricing > div > span {
  max-width: 35rem;
  margin-top: 1rem;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .bookkeeper-pricing > div a {
  margin-top: 2rem;
  padding: 0.8rem 1.05rem;
  border-radius: 4rem;
  background: #123532;
  color: #fff;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-trust {
  background: #f6f5ef;
}

.demo-hub-page .bookkeeper-trust > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .bookkeeper-trust > header p {
  width: 18%;
  color: #32746c;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-trust > header h3 {
  width: 52%;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .bookkeeper-trust > header span {
  width: 30%;
  color: #687872;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .bookkeeper-trust > div {
  display: flex;
}

.demo-hub-page .bookkeeper-trust > div article {
  width: 25%;
  min-height: 19rem;
  padding: 1.3rem;
  border: 1px solid rgba(18, 53, 50, 0.2);
}

.demo-hub-page .bookkeeper-trust > div article:nth-child(even) {
  background: #e7efec;
}

.demo-hub-page .bookkeeper-trust > div article > span {
  color: #32746c;
  font-size: 0.53rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-trust > div article strong {
  display: block;
  margin: 4rem 0 1rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.15;
}

.demo-hub-page .bookkeeper-trust > div article p {
  color: #687872;
  font-size: 0.64rem;
  line-height: 1.45;
}

.demo-hub-page .bookkeeper-call {
  display: flex;
  gap: 1rem;
  background: #123532;
  color: #fff;
}

.demo-hub-page .bookkeeper-call > div,
.demo-hub-page .bookkeeper-call > form {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .bookkeeper-call > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .bookkeeper-call > div > p {
  margin-bottom: 1rem;
  color: #b9e78d;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-call > div h3 {
  font-size: clamp(3rem, 6vw, 6.3rem);
  line-height: 0.88;
}

.demo-hub-page .bookkeeper-call > div > span {
  max-width: 35rem;
  margin-top: 1rem;
  color: #d5e3df;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .bookkeeper-call > div figure {
  min-height: 20rem;
  margin-top: auto;
}

.demo-hub-page .bookkeeper-call > form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem;
  background: #f6f5ef;
  color: #123532;
}

.demo-hub-page .bookkeeper-call > form > div {
  display: flex;
  gap: 0.9rem;
}

.demo-hub-page .bookkeeper-call > form > div label {
  width: 50%;
}

.demo-hub-page .bookkeeper-call > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .bookkeeper-call > form label span {
  font-size: 0.55rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-call > form input,
.demo-hub-page .bookkeeper-call > form select,
.demo-hub-page .bookkeeper-call > form textarea {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid rgba(18, 53, 50, 0.24);
  border-radius: 0;
  background: #fff;
  color: inherit;
  font-size: 0.7rem;
}

.demo-hub-page .bookkeeper-call > form > button {
  min-height: 3.4rem;
  border: 0;
  background: #123532;
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-call > form aside {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px solid rgba(18, 53, 50, 0.24);
  background: #b9e78d;
}

.demo-hub-page .bookkeeper-call > form aside strong {
  font-size: 1rem;
  font-weight: 400;
}

.demo-hub-page .bookkeeper-call > form aside span,
.demo-hub-page .bookkeeper-call > form aside p,
.demo-hub-page .bookkeeper-call > form aside small {
  font-size: 0.64rem;
  line-height: 1.45;
}

.demo-hub-page .bookkeeper-footer {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem;
  background: #0b2825;
  color: #fff;
}

.demo-hub-page .bookkeeper-footer > a {
  width: 27%;
}

.demo-hub-page .bookkeeper-footer > div {
  display: flex;
  width: 20%;
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .bookkeeper-footer > div p {
  color: #b9e78d;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.demo-hub-page .bookkeeper-footer > div a {
  font-size: 0.64rem;
}

.demo-hub-page .bookkeeper-footer blockquote {
  margin-left: auto;
  color: #b9e78d;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.35;
  text-align: right;
}@media (max-width: 820px) {
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-nav {
    padding: 0 1.5rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-nav nav {
    display: none;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-nav > a:last-child {
    margin-left: auto;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > header,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services > header,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-process,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > header,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero__copy,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > header p,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > header h3,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > header span,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services > header p,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-process > header,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-process > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > figure,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > header p,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > header h3,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > header span,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call > form {
    width: 100%;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero__copy {
    padding: 5rem 1.5rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > figure {
    min-height: 38rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-boundary {
    padding: 1rem 1.5rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-process,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call {
    padding: 5rem 1.5rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > div button,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services > div article {
    width: calc(50% - 0.4rem);
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > div article {
    width: 50%;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-process > header > span {
    margin-top: 2rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-footer > a {
    width: 100%;
  }}@media (max-width: 560px) {
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-nav {
    min-height: 4.8rem;
    padding: 0 1rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-nav > a:last-child {
    padding: 0.6rem 0.7rem;
    font-size: 0.46rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero__copy {
    padding: 4rem 1rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero__copy h2 {
    font-size: 3.45rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero__copy > div {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > figure {
    min-height: 29rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-boundary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-process,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call {
    padding: 4rem 1rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > div button,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > div article,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services > div button,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services > div article,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > div button,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > div article {
    width: 100%;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > aside {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report > div:last-child {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report > div:last-child article {
    width: 100%;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call > form {
    padding: 1.2rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call > form > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call > form > div label {
    width: 100%;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-footer {
    flex-direction: column;
    padding: 3rem 1rem;
  }
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-footer > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-footer blockquote {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }}
.demo-hub-page .demo-site--tutor {
  background: #e7eef5;
  color: #12283c;
  font-family: "GC Neue Machine", Arial, sans-serif;
}

.demo-hub-page .demo-site--tutor h2,
.demo-hub-page .demo-site--tutor h3,
.demo-hub-page .demo-site--tutor h4,
.demo-hub-page .demo-site--tutor p,
.demo-hub-page .demo-site--tutor figure,
.demo-hub-page .demo-site--tutor blockquote {
  margin: 0;
}

.demo-hub-page .demo-site--tutor h2,
.demo-hub-page .demo-site--tutor h3,
.demo-hub-page .demo-site--tutor h4 {
  font-weight: 400;
  letter-spacing: -0.055em;
  text-transform: none;
}

.demo-hub-page .demo-site--tutor a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--tutor button,
.demo-hub-page .demo-site--tutor input,
.demo-hub-page .demo-site--tutor select,
.demo-hub-page .demo-site--tutor textarea {
  font: inherit;
}

.demo-hub-page .demo-site--tutor button,
.demo-hub-page .demo-site--tutor a {
  cursor: pointer;
}

.demo-hub-page .demo-site--tutor img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--tutor [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--tutor .professional-mode-switch {
  background: #12283c;
}

.demo-hub-page .demo-site--tutor .professional-mode-switch button:hover,
.demo-hub-page .demo-site--tutor .professional-mode-switch button.is-active {
  border-color: #f4d64f;
  background: #f4d64f;
  color: #12283c;
}

.demo-hub-page .tutor-site {
  overflow: hidden;
  background: #fbf7ec;
}

.demo-hub-page .tutor-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: 2rem;
  padding: 0 4rem;
  border-bottom: 1px solid rgba(18, 40, 60, 0.18);
  background: rgba(251, 247, 236, 0.94);
  backdrop-filter: blur(14px);
}

.demo-hub-page .tutor-nav nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin-left: auto;
}

.demo-hub-page .tutor-nav nav a {
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-nav > a:last-child {
  padding: 0.8rem 1.15rem;
  border-radius: 4rem;
  background: #12283c;
  color: #fff;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-brand {
  display: flex;
  min-width: 11rem;
  flex-direction: column;
  line-height: 1;
}

.demo-hub-page .tutor-brand strong {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-brand span {
  margin-top: 0.24rem;
  color: #3279aa;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-hero {
  position: relative;
  display: flex;
  min-height: 50rem;
  padding: 3.5rem 4rem 4rem;
  gap: 1rem;
  background: #cce8f7;
}

.demo-hub-page .tutor-hero > figure {
  position: relative;
  width: 43%;
  overflow: hidden;
  border-radius: 12rem 12rem 0.3rem 0.3rem;
}

.demo-hub-page .tutor-hero > figure figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.85rem;
  background: rgba(251, 247, 236, 0.9);
  font-size: 0.65rem;
  text-align: center;
}

.demo-hub-page .tutor-hero > aside {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  display: flex;
  width: 12rem;
  min-height: 12rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.2rem;
  border-radius: 50%;
  background: #f4d64f;
}

.demo-hub-page .tutor-hero > aside b {
  font-size: 2.2rem;
  font-weight: 400;
}

.demo-hub-page .tutor-hero > aside span {
  font-size: 0.62rem;
  line-height: 1.4;
}

.demo-hub-page .tutor-hero__copy {
  display: flex;
  width: 57%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: 3rem;
}

.demo-hub-page .tutor-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #3279aa;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-hero__copy h2 {
  max-width: 59rem;
  font-size: clamp(4rem, 7vw, 8rem);
  line-height: 0.85;
}

.demo-hub-page .tutor-hero__copy h2 em {
  display: block;
  color: #3279aa;
  font-style: normal;
}

.demo-hub-page .tutor-hero__copy > span {
  max-width: 38rem;
  margin: 2rem 0;
  font-size: 0.86rem;
  line-height: 1.65;
}

.demo-hub-page .tutor-hero__copy > div {
  display: flex;
  gap: 0.8rem;
}

.demo-hub-page .tutor-hero__copy > div a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.7rem 1.15rem;
  border: 1px solid #12283c;
  border-radius: 4rem;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-hero__copy > div a:first-child {
  background: #12283c;
  color: #fff;
}

.demo-hub-page .tutor-help,
.demo-hub-page .tutor-subjects,
.demo-hub-page .tutor-approach,
.demo-hub-page .tutor-parents,
.demo-hub-page .tutor-pricing,
.demo-hub-page .tutor-call {
  padding: 7rem 4rem;
}

.demo-hub-page .tutor-help {
  background: #fbf7ec;
}

.demo-hub-page .tutor-help > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .tutor-help > header p {
  width: 20%;
  color: #3279aa;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-help > header h3 {
  width: 55%;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .tutor-help > header span {
  width: 25%;
  color: #657580;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .tutor-help > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.demo-hub-page .tutor-help > div button {
  display: flex;
  width: calc(50% - 0.4rem);
  min-height: 11rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid rgba(18, 40, 60, 0.22);
  border-radius: 6rem 6rem 0.25rem 0.25rem;
  background: #e6f2f7;
  color: inherit;
  text-align: left;
}

.demo-hub-page .tutor-help > div button:nth-child(even) {
  background: #f4d64f;
}

.demo-hub-page .tutor-help > div button:hover,
.demo-hub-page .tutor-help > div button.is-active {
  background: #12283c;
  color: #fff;
}

.demo-hub-page .tutor-help > div button b {
  font-size: 1.4rem;
  font-weight: 400;
}

.demo-hub-page .tutor-help > div button span {
  font-size: 0.68rem;
}

.demo-hub-page .tutor-subjects {
  background: #12283c;
  color: #fff;
}

.demo-hub-page .tutor-subjects > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .tutor-subjects > header p {
  width: 22%;
  color: #f4d64f;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-subjects > header h3 {
  max-width: 55rem;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .tutor-subjects > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .tutor-subjects > div button {
  display: flex;
  min-height: 6rem;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #fff;
  text-align: left;
}

.demo-hub-page .tutor-subjects > div button span {
  color: #f4d64f;
  font-size: 0.56rem;
}

.demo-hub-page .tutor-subjects > div button b {
  font-size: 2rem;
  font-weight: 400;
}

.demo-hub-page .tutor-subjects > div button:hover b,
.demo-hub-page .tutor-subjects > div button.is-active b {
  color: #f4d64f;
}

.demo-hub-page .tutor-approach {
  display: flex;
  gap: 4rem;
  background: #e6f2f7;
}

.demo-hub-page .tutor-approach > div {
  width: calc(50% - 2rem);
}

.demo-hub-page .tutor-approach > div:first-child {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .tutor-approach > div:first-child > p {
  margin-bottom: 1rem;
  color: #3279aa;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-approach > div:first-child h3 {
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .tutor-approach > div:first-child > span {
  margin-top: 1rem;
  font-size: 0.85rem;
}

.demo-hub-page .tutor-approach > div:first-child figure {
  min-height: 20rem;
  margin-top: 2rem;
}

.demo-hub-page .tutor-approach > div:last-child {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .tutor-approach > div:last-child article {
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(18, 40, 60, 0.22);
}

.demo-hub-page .tutor-approach > div:last-child article b {
  font-size: 1.3rem;
  font-weight: 400;
}

.demo-hub-page .tutor-approach > div:last-child article p {
  margin-top: 0.55rem;
  color: #657580;
  font-size: 0.67rem;
  line-height: 1.5;
}

.demo-hub-page .tutor-parents {
  display: flex;
  min-height: 43rem;
  padding: 0;
  background: #f4d64f;
}

.demo-hub-page .tutor-parents figure,
.demo-hub-page .tutor-parents > div {
  width: 50%;
}

.demo-hub-page .tutor-parents > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem;
}

.demo-hub-page .tutor-parents > div > p {
  margin-bottom: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-parents > div h3 {
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .tutor-parents > div > span {
  margin: 1.5rem 0 0.7rem;
  font-size: 0.7rem;
}

.demo-hub-page .tutor-parents > div > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .tutor-parents > div > div b {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(18, 40, 60, 0.28);
  font-size: 0.78rem;
  font-weight: 400;
}

.demo-hub-page .tutor-parents > div blockquote {
  margin-top: 2rem;
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.25;
}

.demo-hub-page .tutor-pricing {
  display: flex;
  gap: 1rem;
  background: #fbf7ec;
}

.demo-hub-page .tutor-pricing > div {
  display: flex;
  width: calc(50% - 0.5rem);
  min-height: 24rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  border: 1px solid rgba(18, 40, 60, 0.22);
}

.demo-hub-page .tutor-pricing > div:first-child {
  background: #cce8f7;
}

.demo-hub-page .tutor-pricing > div:last-child {
  background: #12283c;
  color: #fff;
}

.demo-hub-page .tutor-pricing > div > p {
  color: #3279aa;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-pricing > div h3,
.demo-hub-page .tutor-pricing > div h4 {
  max-width: 36rem;
  margin-top: 3rem;
  font-size: 2.5rem;
  line-height: 1;
}

.demo-hub-page .tutor-pricing > div strong {
  margin-top: auto;
  font-size: 2.4rem;
  font-weight: 400;
}

.demo-hub-page .tutor-pricing > div > span {
  margin-top: 0.6rem;
  font-size: 0.68rem;
  line-height: 1.5;
}

.demo-hub-page .tutor-pricing > div a {
  margin-top: auto;
  padding: 0.8rem 1rem;
  border-radius: 4rem;
  background: #f4d64f;
  color: #12283c;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.demo-hub-page .tutor-call {
  display: flex;
  gap: 1rem;
  background: #cce8f7;
}

.demo-hub-page .tutor-call > div,
.demo-hub-page .tutor-call > form {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .tutor-call > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .tutor-call > div > p {
  margin-bottom: 1rem;
  color: #3279aa;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .tutor-call > div h3 {
  font-size: clamp(3rem, 6vw, 6.2rem);
  line-height: 0.88;
}

.demo-hub-page .tutor-call > div > strong {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 400;
}

.demo-hub-page .tutor-call > div figure {
  min-height: 20rem;
  margin-top: auto;
}

.demo-hub-page .tutor-call > form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem;
  background: #fbf7ec;
}

.demo-hub-page .tutor-call > form > div {
  display: flex;
  gap: 0.9rem;
}

.demo-hub-page .tutor-call > form > div label {
  width: 50%;
}

.demo-hub-page .tutor-call > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .tutor-call > form label span {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-call > form input,
.demo-hub-page .tutor-call > form select,
.demo-hub-page .tutor-call > form textarea {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid rgba(18, 40, 60, 0.24);
  border-radius: 0;
  background: #fff;
  color: inherit;
  font-size: 0.72rem;
}

.demo-hub-page .tutor-call > form > button {
  min-height: 3.4rem;
  border: 0;
  background: #12283c;
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .tutor-call > form aside {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px solid rgba(18, 40, 60, 0.25);
  background: #f4d64f;
}

.demo-hub-page .tutor-call > form aside strong {
  font-size: 1rem;
  font-weight: 400;
}

.demo-hub-page .tutor-call > form aside span,
.demo-hub-page .tutor-call > form aside p,
.demo-hub-page .tutor-call > form aside small {
  font-size: 0.65rem;
  line-height: 1.45;
}

.demo-hub-page .tutor-footer {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem;
  background: #12283c;
  color: #fff;
}

.demo-hub-page .tutor-footer > a {
  width: 27%;
}

.demo-hub-page .tutor-footer > div {
  display: flex;
  width: 18%;
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .tutor-footer > div p {
  color: #f4d64f;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.demo-hub-page .tutor-footer > div a,
.demo-hub-page .tutor-footer > div span {
  font-size: 0.65rem;
}

.demo-hub-page .tutor-footer blockquote {
  margin-left: auto;
  color: #f4d64f;
  font-size: 1.2rem;
  font-style: italic;
  text-align: right;
}

.demo-hub-page .demo-site--lawyer {
  background: #e8e7e4;
  color: #19221f;
  font-family: "GC Neue Machine", Arial, sans-serif;
}

.demo-hub-page .demo-site--lawyer h2,
.demo-hub-page .demo-site--lawyer h3,
.demo-hub-page .demo-site--lawyer h4,
.demo-hub-page .demo-site--lawyer p,
.demo-hub-page .demo-site--lawyer figure,
.demo-hub-page .demo-site--lawyer blockquote {
  margin: 0;
}

.demo-hub-page .demo-site--lawyer h2,
.demo-hub-page .demo-site--lawyer h3,
.demo-hub-page .demo-site--lawyer h4 {
  font-weight: 400;
  letter-spacing: -0.055em;
  text-transform: none;
}

.demo-hub-page .demo-site--lawyer a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--lawyer button,
.demo-hub-page .demo-site--lawyer input,
.demo-hub-page .demo-site--lawyer select,
.demo-hub-page .demo-site--lawyer textarea {
  font: inherit;
}

.demo-hub-page .demo-site--lawyer button,
.demo-hub-page .demo-site--lawyer a {
  cursor: pointer;
}

.demo-hub-page .demo-site--lawyer img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--lawyer [hidden] {
  display: none !important;
}

.demo-hub-page .lawyer-site {
  overflow: hidden;
  background: #f5f2ea;
}

.demo-hub-page .lawyer-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: 2rem;
  padding: 0 4rem;
  border-bottom: 1px solid rgba(25, 34, 31, 0.18);
  background: rgba(245, 242, 234, 0.95);
  backdrop-filter: blur(14px);
}

.demo-hub-page .lawyer-nav nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin-left: auto;
}

.demo-hub-page .lawyer-nav nav a {
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-nav > a:last-child {
  padding: 0.8rem 1.15rem;
  border: 1px solid #163a35;
  background: #163a35;
  color: #fff;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-brand {
  display: flex;
  min-width: 13rem;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.7rem;
  column-gap: 0.7rem;
  line-height: 1;
}

.demo-hub-page .lawyer-brand > span {
  display: inline-flex;
  width: 2.2rem;
  height: 2.2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #163a35;
  border-radius: 50%;
  color: #163a35;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.66rem;
}

.demo-hub-page .lawyer-brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-brand small {
  width: 100%;
  padding-left: 2.9rem;
  color: #80694f;
  font-size: 0.47rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-hero {
  display: flex;
  min-height: 50rem;
  background: #f5f2ea;
}

.demo-hub-page .lawyer-hero > figure {
  position: relative;
  width: 48%;
}

.demo-hub-page .lawyer-hero > figure figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.9rem;
  background: rgba(245, 242, 234, 0.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  text-align: center;
}

.demo-hub-page .lawyer-hero > aside {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  display: none;
}

.demo-hub-page .lawyer-hero__copy {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem 4rem;
  background: #163a35;
  color: #fff;
}

.demo-hub-page .lawyer-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #d6bd99;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-hero__copy h2 {
  max-width: 55rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 7vw, 7.6rem);
  line-height: 0.85;
}

.demo-hub-page .lawyer-hero__copy h2 em {
  display: block;
  color: #d6bd99;
  font-weight: 400;
}

.demo-hub-page .lawyer-hero__copy > span {
  max-width: 38rem;
  margin: 2rem 0;
  color: #d7e1dd;
  font-size: 0.86rem;
  line-height: 1.65;
}

.demo-hub-page .lawyer-hero__copy > div {
  display: flex;
  gap: 0.8rem;
}

.demo-hub-page .lawyer-hero__copy > div a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-hero__copy > div a:first-child {
  border-color: #d6bd99;
  background: #d6bd99;
  color: #163a35;
}

.demo-hub-page .lawyer-notice {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem 4rem;
  background: #19221f;
  color: #fff;
}

.demo-hub-page .lawyer-notice strong {
  color: #d6bd99;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-notice span {
  font-size: 0.64rem;
}

.demo-hub-page .lawyer-services,
.demo-hub-page .lawyer-approach,
.demo-hub-page .lawyer-experience,
.demo-hub-page .lawyer-matters,
.demo-hub-page .lawyer-process,
.demo-hub-page .lawyer-consult {
  padding: 7rem 4rem;
}

.demo-hub-page .lawyer-services {
  background: #f5f2ea;
}

.demo-hub-page .lawyer-services > header,
.demo-hub-page .lawyer-services .lawyer-experience > header,
.demo-hub-page .lawyer-services .lawyer-matters > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .lawyer-services > header p {
  width: 18%;
  color: #80694f;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-services > header h3 {
  width: 55%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .lawyer-services > header span {
  width: 27%;
  color: #66716d;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .lawyer-services > div {
  display: flex;
}

.demo-hub-page .lawyer-services > div article {
  display: flex;
  width: 33.333%;
  min-height: 24rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid rgba(25, 34, 31, 0.2);
}

.demo-hub-page .lawyer-services > div article:nth-child(2) {
  background: #d6bd99;
}

.demo-hub-page .lawyer-services > div article:nth-child(3) {
  background: #163a35;
  color: #fff;
}

.demo-hub-page .lawyer-services > div article.is-selected {
  box-shadow: inset 0 0 0 4px #a46f39;
}

.demo-hub-page .lawyer-services > div article > span {
  color: #80694f;
  font-size: 0.58rem;
}

.demo-hub-page .lawyer-services > div article h4 {
  margin-top: 4rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
}

.demo-hub-page .lawyer-services > div article p {
  margin-top: 0.8rem;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .lawyer-services > div article button {
  margin-top: auto;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-approach {
  display: flex;
  min-height: 46rem;
  padding: 0;
  background: #ded8cb;
}

.demo-hub-page .lawyer-approach figure,
.demo-hub-page .lawyer-approach > div {
  width: 50%;
}

.demo-hub-page .lawyer-approach > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem;
}

.demo-hub-page .lawyer-approach > div > p {
  margin-bottom: 1rem;
  color: #80694f;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-approach > div h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .lawyer-approach > div > span {
  margin: 1.5rem 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

.demo-hub-page .lawyer-approach > div > div article {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(25, 34, 31, 0.22);
}

.demo-hub-page .lawyer-approach > div > div article b {
  font-size: 0.82rem;
  font-weight: 400;
}

.demo-hub-page .lawyer-approach > div > div article p {
  margin-top: 0.5rem;
  color: #66716d;
  font-size: 0.66rem;
  line-height: 1.5;
}

.demo-hub-page .lawyer-experience {
  background: #163a35;
  color: #fff;
}

.demo-hub-page .lawyer-experience > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .lawyer-experience > header p {
  width: 18%;
  color: #d6bd99;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-experience > header h3 {
  width: 52%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .lawyer-experience > header span {
  width: 30%;
  color: #c6d2ce;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .lawyer-experience > div {
  display: flex;
}

.demo-hub-page .lawyer-experience > div article {
  width: 33.333%;
  min-height: 19rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-hub-page .lawyer-experience > div article > span {
  color: #d6bd99;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-experience > div article strong {
  display: block;
  margin: 4rem 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  font-weight: 400;
}

.demo-hub-page .lawyer-experience > div article p {
  color: #c6d2ce;
  font-size: 0.67rem;
  line-height: 1.5;
}

.demo-hub-page .lawyer-matters {
  background: #f5f2ea;
}

.demo-hub-page .lawyer-matters > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .lawyer-matters > header p {
  width: 18%;
  color: #80694f;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-matters > header h3 {
  width: 52%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .lawyer-matters > header span {
  width: 30%;
  color: #66716d;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .lawyer-matters > div {
  display: flex;
}

.demo-hub-page .lawyer-matters > div article {
  width: 33.333%;
  min-height: 18rem;
  padding: 1.5rem;
  border: 1px solid rgba(25, 34, 31, 0.2);
}

.demo-hub-page .lawyer-matters > div article:nth-child(2) {
  background: #ded8cb;
}

.demo-hub-page .lawyer-matters > div article:nth-child(3) {
  background: #d6bd99;
}

.demo-hub-page .lawyer-matters > div article b {
  color: #80694f;
  font-size: 0.55rem;
  font-weight: 400;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-matters > div article h4 {
  margin: 4rem 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  line-height: 1;
}

.demo-hub-page .lawyer-matters > div article p {
  font-size: 0.67rem;
  line-height: 1.5;
}

.demo-hub-page .lawyer-process {
  display: flex;
  gap: 4rem;
  background: #ded8cb;
}

.demo-hub-page .lawyer-process > header,
.demo-hub-page .lawyer-process > div {
  width: calc(50% - 2rem);
}

.demo-hub-page .lawyer-process > header {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .lawyer-process > header p {
  margin-bottom: 1rem;
  color: #80694f;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-process > header h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .lawyer-process > header span {
  margin-top: auto;
  padding: 1.4rem;
  background: #163a35;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.55;
}

.demo-hub-page .lawyer-process > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .lawyer-process > div button {
  display: flex;
  min-height: 7rem;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(25, 34, 31, 0.24);
  background: transparent;
  color: inherit;
  text-align: left;
}

.demo-hub-page .lawyer-process > div button b {
  color: #80694f;
  font-size: 0.58rem;
  font-weight: 400;
}

.demo-hub-page .lawyer-process > div button span {
  font-size: 2rem;
}

.demo-hub-page .lawyer-process > div button:hover span,
.demo-hub-page .lawyer-process > div button.is-active span {
  color: #80694f;
}

.demo-hub-page .lawyer-consult {
  display: flex;
  gap: 1rem;
  background: #19221f;
  color: #fff;
}

.demo-hub-page .lawyer-consult > div,
.demo-hub-page .lawyer-consult > form {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .lawyer-consult > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .lawyer-consult > div > p {
  margin-bottom: 1rem;
  color: #d6bd99;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-consult > div h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 6vw, 6.3rem);
  line-height: 0.88;
}

.demo-hub-page .lawyer-consult > div figure {
  min-height: 21rem;
  margin-top: auto;
}

.demo-hub-page .lawyer-consult > form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem;
  background: #f5f2ea;
  color: #19221f;
}

.demo-hub-page .lawyer-consult > form > div {
  display: flex;
  gap: 0.9rem;
}

.demo-hub-page .lawyer-consult > form > div label {
  width: 50%;
}

.demo-hub-page .lawyer-consult > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .lawyer-consult > form label span {
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-consult > form input,
.demo-hub-page .lawyer-consult > form select,
.demo-hub-page .lawyer-consult > form textarea {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid rgba(25, 34, 31, 0.25);
  border-radius: 0;
  background: #fff;
  color: inherit;
  font-size: 0.72rem;
}

.demo-hub-page .lawyer-consult > form .lawyer-consult__ack {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid #a46f39;
  background: #eee4d4;
}

.demo-hub-page .lawyer-consult > form .lawyer-consult__ack input {
  width: 1rem;
  margin-top: 0.1rem;
}

.demo-hub-page .lawyer-consult > form .lawyer-consult__ack span {
  text-transform: none;
  line-height: 1.45;
}

.demo-hub-page .lawyer-consult > form > button {
  min-height: 3.4rem;
  border: 0;
  background: #163a35;
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-consult > form aside {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px solid rgba(25, 34, 31, 0.25);
  background: #d6bd99;
}

.demo-hub-page .lawyer-consult > form aside strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
}

.demo-hub-page .lawyer-consult > form aside span,
.demo-hub-page .lawyer-consult > form aside p,
.demo-hub-page .lawyer-consult > form aside small {
  font-size: 0.65rem;
  line-height: 1.45;
}

.demo-hub-page .lawyer-footer {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem;
  background: #163a35;
  color: #fff;
}

.demo-hub-page .lawyer-footer > a {
  width: 27%;
}

.demo-hub-page .lawyer-footer .lawyer-brand > span {
  border-color: #d6bd99;
  color: #d6bd99;
}

.demo-hub-page .lawyer-footer > div {
  display: flex;
  width: 20%;
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .lawyer-footer > div p {
  color: #d6bd99;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.demo-hub-page .lawyer-footer > div a,
.demo-hub-page .lawyer-footer > div span {
  font-size: 0.65rem;
}

.demo-hub-page .lawyer-footer blockquote {
  margin-left: auto;
  color: #d6bd99;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-style: italic;
  text-align: right;
}@media (max-width: 820px) {
  .demo-hub-page .demo-site--tutor .tutor-nav,
  .demo-hub-page .demo-site--tutor .lawyer-nav,
  .demo-hub-page .demo-site--lawyer .tutor-nav,
  .demo-hub-page .demo-site--lawyer .lawyer-nav {
    padding: 0 1.5rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-nav nav,
  .demo-hub-page .demo-site--tutor .lawyer-nav nav,
  .demo-hub-page .demo-site--lawyer .tutor-nav nav,
  .demo-hub-page .demo-site--lawyer .lawyer-nav nav {
    display: none;
  }
  .demo-hub-page .demo-site--tutor .tutor-nav > a:last-child,
  .demo-hub-page .demo-site--tutor .lawyer-nav > a:last-child,
  .demo-hub-page .demo-site--lawyer .tutor-nav > a:last-child,
  .demo-hub-page .demo-site--lawyer .lawyer-nav > a:last-child {
    margin-left: auto;
  }
  .demo-hub-page .demo-site--tutor .professional-mode-switch,
  .demo-hub-page .demo-site--lawyer .professional-mode-switch {
    top: 5.5rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero,
  .demo-hub-page .demo-site--tutor .tutor-help > header,
  .demo-hub-page .demo-site--tutor .tutor-subjects > header,
  .demo-hub-page .demo-site--tutor .tutor-approach,
  .demo-hub-page .demo-site--tutor .tutor-parents,
  .demo-hub-page .demo-site--tutor .tutor-pricing,
  .demo-hub-page .demo-site--tutor .tutor-call,
  .demo-hub-page .demo-site--tutor .lawyer-hero,
  .demo-hub-page .demo-site--tutor .lawyer-services > header,
  .demo-hub-page .demo-site--tutor .lawyer-approach,
  .demo-hub-page .demo-site--tutor .lawyer-experience > header,
  .demo-hub-page .demo-site--tutor .lawyer-matters > header,
  .demo-hub-page .demo-site--tutor .lawyer-process,
  .demo-hub-page .demo-site--tutor .lawyer-consult,
  .demo-hub-page .demo-site--lawyer .tutor-hero,
  .demo-hub-page .demo-site--lawyer .tutor-help > header,
  .demo-hub-page .demo-site--lawyer .tutor-subjects > header,
  .demo-hub-page .demo-site--lawyer .tutor-approach,
  .demo-hub-page .demo-site--lawyer .tutor-parents,
  .demo-hub-page .demo-site--lawyer .tutor-pricing,
  .demo-hub-page .demo-site--lawyer .tutor-call,
  .demo-hub-page .demo-site--lawyer .lawyer-hero,
  .demo-hub-page .demo-site--lawyer .lawyer-services > header,
  .demo-hub-page .demo-site--lawyer .lawyer-approach,
  .demo-hub-page .demo-site--lawyer .lawyer-experience > header,
  .demo-hub-page .demo-site--lawyer .lawyer-matters > header,
  .demo-hub-page .demo-site--lawyer .lawyer-process,
  .demo-hub-page .demo-site--lawyer .lawyer-consult {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero,
  .demo-hub-page .demo-site--lawyer .tutor-hero {
    padding: 3rem 1.5rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero__copy,
  .demo-hub-page .demo-site--tutor .tutor-hero > figure,
  .demo-hub-page .demo-site--tutor .tutor-help > header p,
  .demo-hub-page .demo-site--tutor .tutor-help > header h3,
  .demo-hub-page .demo-site--tutor .tutor-help > header span,
  .demo-hub-page .demo-site--tutor .tutor-subjects > header p,
  .demo-hub-page .demo-site--tutor .tutor-approach > div,
  .demo-hub-page .demo-site--tutor .tutor-parents figure,
  .demo-hub-page .demo-site--tutor .tutor-parents > div,
  .demo-hub-page .demo-site--tutor .tutor-pricing > div,
  .demo-hub-page .demo-site--tutor .tutor-call > div,
  .demo-hub-page .demo-site--tutor .tutor-call > form,
  .demo-hub-page .demo-site--tutor .lawyer-hero__copy,
  .demo-hub-page .demo-site--tutor .lawyer-hero > figure,
  .demo-hub-page .demo-site--tutor .lawyer-services > header p,
  .demo-hub-page .demo-site--tutor .lawyer-services > header h3,
  .demo-hub-page .demo-site--tutor .lawyer-services > header span,
  .demo-hub-page .demo-site--tutor .lawyer-approach figure,
  .demo-hub-page .demo-site--tutor .lawyer-approach > div,
  .demo-hub-page .demo-site--tutor .lawyer-experience > header p,
  .demo-hub-page .demo-site--tutor .lawyer-experience > header h3,
  .demo-hub-page .demo-site--tutor .lawyer-experience > header span,
  .demo-hub-page .demo-site--tutor .lawyer-matters > header p,
  .demo-hub-page .demo-site--tutor .lawyer-matters > header h3,
  .demo-hub-page .demo-site--tutor .lawyer-matters > header span,
  .demo-hub-page .demo-site--tutor .lawyer-process > header,
  .demo-hub-page .demo-site--tutor .lawyer-process > div,
  .demo-hub-page .demo-site--tutor .lawyer-consult > div,
  .demo-hub-page .demo-site--tutor .lawyer-consult > form,
  .demo-hub-page .demo-site--lawyer .tutor-hero__copy,
  .demo-hub-page .demo-site--lawyer .tutor-hero > figure,
  .demo-hub-page .demo-site--lawyer .tutor-help > header p,
  .demo-hub-page .demo-site--lawyer .tutor-help > header h3,
  .demo-hub-page .demo-site--lawyer .tutor-help > header span,
  .demo-hub-page .demo-site--lawyer .tutor-subjects > header p,
  .demo-hub-page .demo-site--lawyer .tutor-approach > div,
  .demo-hub-page .demo-site--lawyer .tutor-parents figure,
  .demo-hub-page .demo-site--lawyer .tutor-parents > div,
  .demo-hub-page .demo-site--lawyer .tutor-pricing > div,
  .demo-hub-page .demo-site--lawyer .tutor-call > div,
  .demo-hub-page .demo-site--lawyer .tutor-call > form,
  .demo-hub-page .demo-site--lawyer .lawyer-hero__copy,
  .demo-hub-page .demo-site--lawyer .lawyer-hero > figure,
  .demo-hub-page .demo-site--lawyer .lawyer-services > header p,
  .demo-hub-page .demo-site--lawyer .lawyer-services > header h3,
  .demo-hub-page .demo-site--lawyer .lawyer-services > header span,
  .demo-hub-page .demo-site--lawyer .lawyer-approach figure,
  .demo-hub-page .demo-site--lawyer .lawyer-approach > div,
  .demo-hub-page .demo-site--lawyer .lawyer-experience > header p,
  .demo-hub-page .demo-site--lawyer .lawyer-experience > header h3,
  .demo-hub-page .demo-site--lawyer .lawyer-experience > header span,
  .demo-hub-page .demo-site--lawyer .lawyer-matters > header p,
  .demo-hub-page .demo-site--lawyer .lawyer-matters > header h3,
  .demo-hub-page .demo-site--lawyer .lawyer-matters > header span,
  .demo-hub-page .demo-site--lawyer .lawyer-process > header,
  .demo-hub-page .demo-site--lawyer .lawyer-process > div,
  .demo-hub-page .demo-site--lawyer .lawyer-consult > div,
  .demo-hub-page .demo-site--lawyer .lawyer-consult > form {
    width: 100%;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero > figure,
  .demo-hub-page .demo-site--tutor .lawyer-hero > figure,
  .demo-hub-page .demo-site--tutor .lawyer-approach figure,
  .demo-hub-page .demo-site--lawyer .tutor-hero > figure,
  .demo-hub-page .demo-site--lawyer .lawyer-hero > figure,
  .demo-hub-page .demo-site--lawyer .lawyer-approach figure {
    min-height: 38rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero > aside,
  .demo-hub-page .demo-site--lawyer .tutor-hero > aside {
    display: none;
  }
  .demo-hub-page .demo-site--tutor .tutor-help,
  .demo-hub-page .demo-site--tutor .tutor-subjects,
  .demo-hub-page .demo-site--tutor .tutor-approach,
  .demo-hub-page .demo-site--tutor .tutor-parents > div,
  .demo-hub-page .demo-site--tutor .tutor-pricing,
  .demo-hub-page .demo-site--tutor .tutor-call,
  .demo-hub-page .demo-site--tutor .lawyer-services,
  .demo-hub-page .demo-site--tutor .lawyer-approach > div,
  .demo-hub-page .demo-site--tutor .lawyer-experience,
  .demo-hub-page .demo-site--tutor .lawyer-matters,
  .demo-hub-page .demo-site--tutor .lawyer-process,
  .demo-hub-page .demo-site--tutor .lawyer-consult,
  .demo-hub-page .demo-site--lawyer .tutor-help,
  .demo-hub-page .demo-site--lawyer .tutor-subjects,
  .demo-hub-page .demo-site--lawyer .tutor-approach,
  .demo-hub-page .demo-site--lawyer .tutor-parents > div,
  .demo-hub-page .demo-site--lawyer .tutor-pricing,
  .demo-hub-page .demo-site--lawyer .tutor-call,
  .demo-hub-page .demo-site--lawyer .lawyer-services,
  .demo-hub-page .demo-site--lawyer .lawyer-approach > div,
  .demo-hub-page .demo-site--lawyer .lawyer-experience,
  .demo-hub-page .demo-site--lawyer .lawyer-matters,
  .demo-hub-page .demo-site--lawyer .lawyer-process,
  .demo-hub-page .demo-site--lawyer .lawyer-consult {
    padding: 5rem 1.5rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-pricing > div,
  .demo-hub-page .demo-site--lawyer .tutor-pricing > div {
    min-height: 20rem;
  }
  .demo-hub-page .demo-site--tutor .lawyer-hero__copy,
  .demo-hub-page .demo-site--lawyer .lawyer-hero__copy {
    padding: 5rem 1.5rem;
  }
  .demo-hub-page .demo-site--tutor .lawyer-notice,
  .demo-hub-page .demo-site--lawyer .lawyer-notice {
    padding: 1rem 1.5rem;
  }
  .demo-hub-page .demo-site--tutor .lawyer-footer,
  .demo-hub-page .demo-site--tutor .tutor-footer,
  .demo-hub-page .demo-site--lawyer .lawyer-footer,
  .demo-hub-page .demo-site--lawyer .tutor-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--tutor .lawyer-footer > a,
  .demo-hub-page .demo-site--tutor .tutor-footer > a,
  .demo-hub-page .demo-site--lawyer .lawyer-footer > a,
  .demo-hub-page .demo-site--lawyer .tutor-footer > a {
    width: 100%;
  }}@media (max-width: 560px) {
  .demo-hub-page .demo-site--tutor .tutor-nav,
  .demo-hub-page .demo-site--tutor .lawyer-nav,
  .demo-hub-page .demo-site--lawyer .tutor-nav,
  .demo-hub-page .demo-site--lawyer .lawyer-nav {
    min-height: 4.8rem;
    padding: 0 1rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-nav > a:last-child,
  .demo-hub-page .demo-site--tutor .lawyer-nav > a:last-child,
  .demo-hub-page .demo-site--lawyer .tutor-nav > a:last-child,
  .demo-hub-page .demo-site--lawyer .lawyer-nav > a:last-child {
    padding: 0.6rem 0.7rem;
    font-size: 0.46rem;
  }
  .demo-hub-page .demo-site--tutor .professional-mode-switch,
  .demo-hub-page .demo-site--lawyer .professional-mode-switch {
    top: 4.8rem;
    justify-content: flex-start;
  }
  .demo-hub-page .demo-site--tutor .professional-mode-switch span,
  .demo-hub-page .demo-site--lawyer .professional-mode-switch span {
    display: none;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero,
  .demo-hub-page .demo-site--lawyer .tutor-hero {
    padding: 2.5rem 1rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero__copy h2,
  .demo-hub-page .demo-site--tutor .lawyer-hero__copy h2,
  .demo-hub-page .demo-site--lawyer .tutor-hero__copy h2,
  .demo-hub-page .demo-site--lawyer .lawyer-hero__copy h2 {
    font-size: 3.45rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero__copy > div,
  .demo-hub-page .demo-site--tutor .lawyer-hero__copy > div,
  .demo-hub-page .demo-site--lawyer .tutor-hero__copy > div,
  .demo-hub-page .demo-site--lawyer .lawyer-hero__copy > div {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--tutor .tutor-hero > figure,
  .demo-hub-page .demo-site--tutor .lawyer-hero > figure,
  .demo-hub-page .demo-site--tutor .lawyer-approach figure,
  .demo-hub-page .demo-site--lawyer .tutor-hero > figure,
  .demo-hub-page .demo-site--lawyer .lawyer-hero > figure,
  .demo-hub-page .demo-site--lawyer .lawyer-approach figure {
    min-height: 29rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-help,
  .demo-hub-page .demo-site--tutor .tutor-subjects,
  .demo-hub-page .demo-site--tutor .tutor-approach,
  .demo-hub-page .demo-site--tutor .tutor-parents > div,
  .demo-hub-page .demo-site--tutor .tutor-pricing,
  .demo-hub-page .demo-site--tutor .tutor-call,
  .demo-hub-page .demo-site--tutor .lawyer-services,
  .demo-hub-page .demo-site--tutor .lawyer-approach > div,
  .demo-hub-page .demo-site--tutor .lawyer-experience,
  .demo-hub-page .demo-site--tutor .lawyer-matters,
  .demo-hub-page .demo-site--tutor .lawyer-process,
  .demo-hub-page .demo-site--tutor .lawyer-consult,
  .demo-hub-page .demo-site--lawyer .tutor-help,
  .demo-hub-page .demo-site--lawyer .tutor-subjects,
  .demo-hub-page .demo-site--lawyer .tutor-approach,
  .demo-hub-page .demo-site--lawyer .tutor-parents > div,
  .demo-hub-page .demo-site--lawyer .tutor-pricing,
  .demo-hub-page .demo-site--lawyer .tutor-call,
  .demo-hub-page .demo-site--lawyer .lawyer-services,
  .demo-hub-page .demo-site--lawyer .lawyer-approach > div,
  .demo-hub-page .demo-site--lawyer .lawyer-experience,
  .demo-hub-page .demo-site--lawyer .lawyer-matters,
  .demo-hub-page .demo-site--lawyer .lawyer-process,
  .demo-hub-page .demo-site--lawyer .lawyer-consult {
    padding: 4rem 1rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-help > div,
  .demo-hub-page .demo-site--tutor .lawyer-services > div,
  .demo-hub-page .demo-site--tutor .lawyer-experience > div,
  .demo-hub-page .demo-site--tutor .lawyer-matters > div,
  .demo-hub-page .demo-site--lawyer .tutor-help > div,
  .demo-hub-page .demo-site--lawyer .lawyer-services > div,
  .demo-hub-page .demo-site--lawyer .lawyer-experience > div,
  .demo-hub-page .demo-site--lawyer .lawyer-matters > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--tutor .tutor-help > div button,
  .demo-hub-page .demo-site--tutor .tutor-help > div article,
  .demo-hub-page .demo-site--tutor .lawyer-services > div button,
  .demo-hub-page .demo-site--tutor .lawyer-services > div article,
  .demo-hub-page .demo-site--tutor .lawyer-experience > div button,
  .demo-hub-page .demo-site--tutor .lawyer-experience > div article,
  .demo-hub-page .demo-site--tutor .lawyer-matters > div button,
  .demo-hub-page .demo-site--tutor .lawyer-matters > div article,
  .demo-hub-page .demo-site--lawyer .tutor-help > div button,
  .demo-hub-page .demo-site--lawyer .tutor-help > div article,
  .demo-hub-page .demo-site--lawyer .lawyer-services > div button,
  .demo-hub-page .demo-site--lawyer .lawyer-services > div article,
  .demo-hub-page .demo-site--lawyer .lawyer-experience > div button,
  .demo-hub-page .demo-site--lawyer .lawyer-experience > div article,
  .demo-hub-page .demo-site--lawyer .lawyer-matters > div button,
  .demo-hub-page .demo-site--lawyer .lawyer-matters > div article {
    width: 100%;
  }
  .demo-hub-page .demo-site--tutor .tutor-parents figure,
  .demo-hub-page .demo-site--lawyer .tutor-parents figure {
    min-height: 29rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-call > form,
  .demo-hub-page .demo-site--tutor .lawyer-consult > form,
  .demo-hub-page .demo-site--lawyer .tutor-call > form,
  .demo-hub-page .demo-site--lawyer .lawyer-consult > form {
    padding: 1.2rem;
  }
  .demo-hub-page .demo-site--tutor .tutor-call > form > div,
  .demo-hub-page .demo-site--tutor .lawyer-consult > form > div,
  .demo-hub-page .demo-site--lawyer .tutor-call > form > div,
  .demo-hub-page .demo-site--lawyer .lawyer-consult > form > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--tutor .tutor-call > form > div label,
  .demo-hub-page .demo-site--tutor .lawyer-consult > form > div label,
  .demo-hub-page .demo-site--lawyer .tutor-call > form > div label,
  .demo-hub-page .demo-site--lawyer .lawyer-consult > form > div label {
    width: 100%;
  }
  .demo-hub-page .demo-site--tutor .lawyer-notice,
  .demo-hub-page .demo-site--lawyer .lawyer-notice {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1rem;
  }
  .demo-hub-page .demo-site--tutor .lawyer-footer,
  .demo-hub-page .demo-site--tutor .tutor-footer,
  .demo-hub-page .demo-site--lawyer .lawyer-footer,
  .demo-hub-page .demo-site--lawyer .tutor-footer {
    flex-direction: column;
    padding: 3rem 1rem;
  }
  .demo-hub-page .demo-site--tutor .lawyer-footer > div,
  .demo-hub-page .demo-site--tutor .lawyer-footer blockquote,
  .demo-hub-page .demo-site--tutor .tutor-footer > div,
  .demo-hub-page .demo-site--tutor .tutor-footer blockquote,
  .demo-hub-page .demo-site--lawyer .lawyer-footer > div,
  .demo-hub-page .demo-site--lawyer .lawyer-footer blockquote,
  .demo-hub-page .demo-site--lawyer .tutor-footer > div,
  .demo-hub-page .demo-site--lawyer .tutor-footer blockquote {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }}
.demo-hub-page .demo-site--consultant h2,
.demo-hub-page .demo-site--consultant h3,
.demo-hub-page .demo-site--consultant h4,
.demo-hub-page .demo-site--consultant p,
.demo-hub-page .demo-site--consultant figure,
.demo-hub-page .demo-site--consultant blockquote,
.demo-hub-page .demo-site--coach h2,
.demo-hub-page .demo-site--coach h3,
.demo-hub-page .demo-site--coach h4,
.demo-hub-page .demo-site--coach p,
.demo-hub-page .demo-site--coach figure,
.demo-hub-page .demo-site--coach blockquote {
  margin: 0;
}

.demo-hub-page .demo-site--consultant h2,
.demo-hub-page .demo-site--consultant h3,
.demo-hub-page .demo-site--consultant h4,
.demo-hub-page .demo-site--coach h2,
.demo-hub-page .demo-site--coach h3,
.demo-hub-page .demo-site--coach h4 {
  font-weight: 400;
  letter-spacing: -0.055em;
  text-transform: none;
}

.demo-hub-page .demo-site--consultant a,
.demo-hub-page .demo-site--coach a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--consultant button,
.demo-hub-page .demo-site--consultant input,
.demo-hub-page .demo-site--consultant select,
.demo-hub-page .demo-site--consultant textarea,
.demo-hub-page .demo-site--coach button,
.demo-hub-page .demo-site--coach input,
.demo-hub-page .demo-site--coach select,
.demo-hub-page .demo-site--coach textarea {
  font: inherit;
}

.demo-hub-page .demo-site--consultant button,
.demo-hub-page .demo-site--consultant a,
.demo-hub-page .demo-site--coach button,
.demo-hub-page .demo-site--coach a {
  cursor: pointer;
}

.demo-hub-page .demo-site--consultant img,
.demo-hub-page .demo-site--coach img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--consultant [hidden],
.demo-hub-page .demo-site--coach [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--consultant {
  background: #eef0e5;
  color: #112921;
  font-family: "GC Neue Machine", Arial, sans-serif;
}

.demo-hub-page .consultant-site {
  overflow: hidden;
  background: #f4f4eb;
}

.demo-hub-page .consultant-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: 2rem;
  padding: 0 4rem;
  border-bottom: 1px solid rgba(17, 41, 33, 0.18);
  background: rgba(244, 244, 235, 0.94);
  backdrop-filter: blur(14px);
}

.demo-hub-page .consultant-nav nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin-left: auto;
}

.demo-hub-page .consultant-nav nav a {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-brand {
  display: flex;
  min-width: 13rem;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.7rem;
  column-gap: 0.7rem;
  line-height: 1;
}

.demo-hub-page .consultant-brand span {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #adf04a;
  color: #112921;
  font-size: 0.65rem;
}

.demo-hub-page .consultant-brand strong {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-brand small {
  width: 100%;
  padding-left: 2.95rem;
  color: #64736c;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-call-link,
.demo-hub-page .consultant-hero__copy a:first-child {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.2rem;
  border-radius: 4rem;
  background: #adf04a;
  color: #112921;
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-hero {
  position: relative;
  display: flex;
  min-height: 53rem;
  align-items: flex-end;
  overflow: hidden;
  background: #071b16;
  color: #fff;
}

.demo-hub-page .consultant-hero > figure,
.demo-hub-page .consultant-hero .consultant-hero__shade {
  position: absolute;
  inset: 0;
}

.demo-hub-page .consultant-hero > figure img {
  -o-object-position: center 27%;
  object-position: center 27%;
}

.demo-hub-page .consultant-hero__shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(4, 18, 14, 0.93) 0%, rgba(4, 18, 14, 0.5) 52%, rgba(4, 18, 14, 0.12) 100%), linear-gradient(0deg, rgba(4, 18, 14, 0.8), transparent 55%);
}

.demo-hub-page .consultant-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  width: 72%;
  flex-direction: column;
  align-items: flex-start;
  padding: 5rem 4rem;
}

.demo-hub-page .consultant-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #adf04a;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-hero__copy h2 {
  max-width: 62rem;
  font-size: clamp(4rem, 7.5vw, 8.5rem);
  line-height: 0.86;
}

.demo-hub-page .consultant-hero__copy h2 em {
  display: block;
  color: #adf04a;
  font-style: normal;
}

.demo-hub-page .consultant-hero__copy > span {
  max-width: 42rem;
  margin: 2rem 0;
  color: #d8e1db;
  font-size: 0.9rem;
  line-height: 1.65;
}

.demo-hub-page .consultant-hero__copy > div {
  display: flex;
  gap: 0.8rem;
}

.demo-hub-page .consultant-hero__copy > div a:last-child {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4rem;
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-hero > aside {
  position: relative;
  z-index: 2;
  width: 28%;
  margin: 0 4rem 5rem 0;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(6, 28, 22, 0.72);
  backdrop-filter: blur(12px);
}

.demo-hub-page .consultant-hero > aside span {
  display: block;
  margin-bottom: 0.5rem;
  color: #adf04a;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-hero > aside strong {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
}

.demo-hub-page .consultant-problems,
.demo-hub-page .consultant-services,
.demo-hub-page .consultant-fit,
.demo-hub-page .consultant-process,
.demo-hub-page .consultant-proof,
.demo-hub-page .consultant-call {
  padding: 7rem 4rem;
}

.demo-hub-page .consultant-problems {
  background: #0d241d;
  color: #eef5ef;
}

.demo-hub-page .consultant-problems > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .consultant-problems > header p {
  width: 20%;
  color: #adf04a;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-problems > header h3 {
  width: 55%;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .consultant-problems > header span {
  width: 25%;
  color: #b8c6bd;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .consultant-problems > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.demo-hub-page .consultant-problems > div button {
  display: flex;
  width: calc(33.333% - 0.47rem);
  min-height: 11rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.4rem;
  border: 1px solid rgba(238, 245, 239, 0.24);
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background 180ms ease, color 180ms ease;
}

.demo-hub-page .consultant-problems > div button:hover,
.demo-hub-page .consultant-problems > div button.is-active {
  background: #adf04a;
  color: #112921;
}

.demo-hub-page .consultant-problems > div button b {
  max-width: 20rem;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.2;
}

.demo-hub-page .consultant-problems > div button span {
  font-size: 0.64rem;
  line-height: 1.45;
}

.demo-hub-page .consultant-services {
  background: #f4f4eb;
}

.demo-hub-page .consultant-services > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .consultant-services > header p {
  width: 25%;
  color: #2d754f;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-services > header h3 {
  max-width: 55rem;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .consultant-services > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .consultant-services > div article {
  display: flex;
  width: calc(33.333% - 0.667rem);
  flex-direction: column;
  padding: 0.8rem;
  border: 1px solid rgba(17, 41, 33, 0.22);
  background: #fff;
}

.demo-hub-page .consultant-services > div article > span {
  margin-bottom: 0.7rem;
  color: #2d754f;
  font-size: 0.58rem;
}

.demo-hub-page .consultant-services > div article figure {
  height: 24rem;
  overflow: hidden;
}

.demo-hub-page .consultant-services > div article h4 {
  margin-top: 1.2rem;
  font-size: 1.8rem;
}

.demo-hub-page .consultant-services > div article p {
  min-height: 3.5rem;
  margin: 0.7rem 0 1.2rem;
  color: #52635b;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .consultant-services > div article button {
  align-self: flex-start;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.57rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-fit {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  background: #adf04a;
}

.demo-hub-page .consultant-fit > div:first-child,
.demo-hub-page .consultant-fit > div:nth-child(2) {
  width: calc(50% - 1.5rem);
}

.demo-hub-page .consultant-fit > div:first-child p {
  margin-bottom: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-fit > div:first-child h3 {
  max-width: 42rem;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .consultant-fit > div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .consultant-fit > div:nth-child(2) article {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid rgba(17, 41, 33, 0.32);
}

.demo-hub-page .consultant-fit > div:nth-child(2) article b {
  font-size: 0.58rem;
  font-weight: 400;
}

.demo-hub-page .consultant-fit > div:nth-child(2) article span {
  max-width: 30rem;
  font-size: 0.95rem;
}

.demo-hub-page .consultant-fit > a {
  width: 100%;
  padding-top: 1rem;
  border-top: 1px solid rgba(17, 41, 33, 0.35);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-process {
  display: flex;
  gap: 4rem;
  background: #e4e8dc;
}

.demo-hub-page .consultant-process > header,
.demo-hub-page .consultant-process > div {
  width: calc(50% - 2rem);
}

.demo-hub-page .consultant-process > header {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .consultant-process > header p {
  margin-bottom: 1rem;
  color: #2d754f;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-process > header h3 {
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .consultant-process > header span {
  max-width: 32rem;
  margin-top: auto;
  padding: 1.5rem;
  background: #112921;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.55;
}

.demo-hub-page .consultant-process > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .consultant-process > div button {
  display: flex;
  min-height: 7rem;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(17, 41, 33, 0.28);
  background: transparent;
  color: inherit;
  text-align: left;
}

.demo-hub-page .consultant-process > div button b {
  color: #2d754f;
  font-size: 0.62rem;
  font-weight: 400;
}

.demo-hub-page .consultant-process > div button span {
  font-size: 2.3rem;
  letter-spacing: -0.04em;
}

.demo-hub-page .consultant-process > div button.is-active span,
.demo-hub-page .consultant-process > div button:hover span {
  color: #2d754f;
}

.demo-hub-page .consultant-proof {
  background: #f4f4eb;
}

.demo-hub-page .consultant-proof > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .consultant-proof > header p {
  width: 18%;
  color: #2d754f;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-proof > header h3 {
  width: 52%;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .consultant-proof > header span {
  width: 30%;
  color: #5b6962;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .consultant-proof > div {
  display: flex;
}

.demo-hub-page .consultant-proof > div article {
  width: 33.333%;
  min-height: 18rem;
  padding: 1.5rem;
  border: 1px solid rgba(17, 41, 33, 0.2);
}

.demo-hub-page .consultant-proof > div article:nth-child(2) {
  background: #112921;
  color: #fff;
}

.demo-hub-page .consultant-proof > div article:nth-child(3) {
  background: #adf04a;
}

.demo-hub-page .consultant-proof > div article span {
  color: #2d754f;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-proof > div article h4 {
  margin: 4rem 0 0.8rem;
  font-size: 1.8rem;
  line-height: 1;
}

.demo-hub-page .consultant-proof > div article p {
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .consultant-call {
  display: flex;
  gap: 1rem;
  background: #0d241d;
  color: #fff;
}

.demo-hub-page .consultant-call > div,
.demo-hub-page .consultant-call > form {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .consultant-call > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .consultant-call > div > p {
  margin-bottom: 1rem;
  color: #adf04a;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-call > div h3 {
  max-width: 43rem;
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  line-height: 0.86;
}

.demo-hub-page .consultant-call > div > strong {
  margin: 1rem 0 2rem;
  color: #adf04a;
  font-size: 1.1rem;
  font-weight: 400;
}

.demo-hub-page .consultant-call > div figure {
  min-height: 20rem;
  margin-top: auto;
}

.demo-hub-page .consultant-call > form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem;
  background: #f4f4eb;
  color: #112921;
}

.demo-hub-page .consultant-call > form > div {
  display: flex;
  gap: 0.9rem;
}

.demo-hub-page .consultant-call > form > div label {
  width: 50%;
}

.demo-hub-page .consultant-call > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .consultant-call > form label span {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-call > form input,
.demo-hub-page .consultant-call > form select,
.demo-hub-page .consultant-call > form textarea {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid rgba(17, 41, 33, 0.25);
  border-radius: 0;
  background: #fff;
  color: inherit;
  font-size: 0.72rem;
}

.demo-hub-page .consultant-call > form > button {
  min-height: 3.4rem;
  border: 0;
  background: #adf04a;
  color: #112921;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-call > form aside {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px solid rgba(17, 41, 33, 0.25);
}

.demo-hub-page .consultant-call > form aside strong {
  font-size: 1rem;
  font-weight: 400;
}

.demo-hub-page .consultant-call > form aside span,
.demo-hub-page .consultant-call > form aside p,
.demo-hub-page .consultant-call > form aside small {
  font-size: 0.65rem;
  line-height: 1.45;
}

.demo-hub-page .consultant-footer {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem;
  background: #071b16;
  color: #fff;
}

.demo-hub-page .consultant-footer > a {
  width: 27%;
}

.demo-hub-page .consultant-footer > div {
  display: flex;
  width: 18%;
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .consultant-footer > div p {
  margin-bottom: 0.4rem;
  color: #adf04a;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .consultant-footer > div a,
.demo-hub-page .consultant-footer > div span {
  font-size: 0.65rem;
}

.demo-hub-page .consultant-footer > strong {
  margin-left: auto;
  color: #adf04a;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
}

.demo-hub-page .demo-site--coach {
  background: #f3eadf;
  color: #382b29;
  font-family: "GC Neue Machine", Arial, sans-serif;
}

.demo-hub-page .coach-site {
  overflow: hidden;
  background: #fbf6ee;
}

.demo-hub-page .coach-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: 2rem;
  padding: 0 4rem;
  border-bottom: 1px solid rgba(56, 43, 41, 0.16);
  background: rgba(251, 246, 238, 0.94);
  backdrop-filter: blur(14px);
}

.demo-hub-page .coach-nav nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin-left: auto;
}

.demo-hub-page .coach-nav nav a {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .coach-nav > a:last-child {
  padding: 0.8rem 1.15rem;
  border-radius: 4rem;
  background: #7b3948;
  color: #fff;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .coach-brand {
  display: flex;
  min-width: 11rem;
  flex-direction: column;
  line-height: 1;
}

.demo-hub-page .coach-brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.demo-hub-page .coach-brand span {
  margin-top: 0.22rem;
  color: #7b3948;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.demo-hub-page .coach-hero {
  display: flex;
  min-height: 51rem;
  padding: 3.5rem 4rem 4rem;
  gap: 1rem;
  background: #e5d8c9;
}

.demo-hub-page .coach-hero > figure {
  position: relative;
  width: 38%;
  overflow: hidden;
  border-radius: 13rem 13rem 0 0;
}

.demo-hub-page .coach-hero > figure figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem;
  background: rgba(251, 246, 238, 0.88);
  backdrop-filter: blur(10px);
}

.demo-hub-page .coach-hero > figure figcaption span {
  color: #7b3948;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .coach-hero__copy {
  display: flex;
  width: 47%;
  flex-direction: column;
  justify-content: center;
  padding-right: 3rem;
}

.demo-hub-page .coach-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #7b3948;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .coach-hero__copy h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.8rem, 7vw, 7.6rem);
  line-height: 0.86;
}

.demo-hub-page .coach-hero__copy h2 em {
  display: block;
  color: #7b3948;
  font-weight: 400;
}

.demo-hub-page .coach-hero__copy > span {
  max-width: 35rem;
  margin: 2rem 0;
  color: #6c5b55;
  font-size: 0.86rem;
  line-height: 1.65;
}

.demo-hub-page .coach-hero__copy > div {
  display: flex;
  gap: 0.8rem;
}

.demo-hub-page .coach-hero__copy > div a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.7rem 1.2rem;
  border: 1px solid #382b29;
  border-radius: 4rem;
  font-size: 0.57rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .coach-hero__copy > div a:first-child {
  border-color: #7b3948;
  background: #7b3948;
  color: #fff;
}

.demo-hub-page .coach-hero > aside {
  display: flex;
  width: 15%;
  flex-direction: column;
  align-self: flex-end;
  gap: 0.65rem;
  padding: 1.2rem;
  border-top: 1px solid rgba(56, 43, 41, 0.35);
}

.demo-hub-page .coach-hero > aside p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.25;
}

.demo-hub-page .coach-hero > aside strong {
  color: #7b3948;
  font-size: 0.63rem;
  font-weight: 400;
  line-height: 1.45;
}

.demo-hub-page .coach-for,
.demo-hub-page .coach-method,
.demo-hub-page .coach-options,
.demo-hub-page .coach-about,
.demo-hub-page .coach-call {
  padding: 7rem 4rem;
}

.demo-hub-page .coach-for {
  background: #fbf6ee;
}

.demo-hub-page .coach-for > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .coach-for > header p {
  width: 20%;
  color: #7b3948;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .coach-for > header h3 {
  width: 55%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .coach-for > header span {
  width: 25%;
  color: #6d5b55;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .coach-for > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.demo-hub-page .coach-for > div button {
  display: flex;
  width: calc(33.333% - 0.5rem);
  min-height: 12rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid rgba(56, 43, 41, 0.2);
  border-radius: 8rem 8rem 0.25rem 0.25rem;
  background: #eadfd5;
  color: inherit;
  text-align: left;
}

.demo-hub-page .coach-for > div button:nth-child(even) {
  background: #d8dfd0;
}

.demo-hub-page .coach-for > div button:hover,
.demo-hub-page .coach-for > div button.is-active {
  background: #7b3948;
  color: #fff;
}

.demo-hub-page .coach-for > div button b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 400;
}

.demo-hub-page .coach-for > div button span {
  font-size: 0.66rem;
}

.demo-hub-page .coach-method {
  display: flex;
  gap: 4rem;
  background: #392d2b;
  color: #fffaf2;
}

.demo-hub-page .coach-method__intro,
.demo-hub-page .coach-method__steps {
  width: calc(50% - 2rem);
}

.demo-hub-page .coach-method__intro {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .coach-method__intro > p {
  margin-bottom: 1rem;
  color: #daa8ae;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .coach-method__intro h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .coach-method__intro figure {
  min-height: 22rem;
  margin-top: 3rem;
  overflow: hidden;
  border-radius: 9rem 9rem 0 0;
}

.demo-hub-page .coach-method__steps {
  display: flex;
  flex-wrap: wrap;
}

.demo-hub-page .coach-method__steps article {
  display: flex;
  width: 50%;
  min-height: 19rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid rgba(255, 250, 242, 0.2);
}

.demo-hub-page .coach-method__steps article:nth-child(2),
.demo-hub-page .coach-method__steps article:nth-child(3) {
  background: #7b3948;
}

.demo-hub-page .coach-method__steps article b {
  color: #daa8ae;
  font-size: 0.58rem;
  font-weight: 400;
}

.demo-hub-page .coach-method__steps article h4 {
  margin-top: auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.1rem;
}

.demo-hub-page .coach-method__steps article p {
  margin-top: 0.7rem;
  color: #dfd1ca;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-hub-page .coach-options {
  background: #e5d8c9;
}

.demo-hub-page .coach-options > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .coach-options > header p {
  width: 20%;
  color: #7b3948;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .coach-options > header h3 {
  width: 55%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .coach-options > header > span {
  width: 25%;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .coach-options > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .coach-options > div article {
  display: flex;
  width: calc(33.333% - 0.667rem);
  min-height: 21rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem;
  background: #fbf6ee;
  transition: transform 180ms ease;
}

.demo-hub-page .coach-options > div article.is-selected {
  transform: translateY(-0.5rem);
  background: #d8dfd0;
}

.demo-hub-page .coach-options > div article > span {
  color: #7b3948;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .coach-options > div article h4 {
  margin: 4rem 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
}

.demo-hub-page .coach-options > div article p {
  max-width: 23rem;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-hub-page .coach-options > div article button {
  margin-top: auto;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .coach-options > a {
  display: table;
  margin: 2.5rem auto 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .coach-about {
  display: flex;
  min-height: 47rem;
  padding: 0;
  background: #fbf6ee;
}

.demo-hub-page .coach-about figure,
.demo-hub-page .coach-about > div {
  width: 50%;
}

.demo-hub-page .coach-about > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem;
}

.demo-hub-page .coach-about > div > p {
  margin-bottom: 1rem;
  color: #7b3948;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .coach-about > div h3 {
  max-width: 39rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  line-height: 0.9;
}

.demo-hub-page .coach-about > div > span {
  max-width: 34rem;
  margin: 1.7rem 0;
  color: #675650;
  font-size: 0.82rem;
  line-height: 1.65;
}

.demo-hub-page .coach-about > div > strong {
  max-width: 30rem;
  padding: 1rem;
  background: #e5d8c9;
  color: #7b3948;
  font-size: 0.67rem;
  font-weight: 400;
}

.demo-hub-page .coach-about > div > a {
  margin-top: 2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .coach-call {
  display: flex;
  gap: 1rem;
  background: #7b3948;
  color: #fff;
}

.demo-hub-page .coach-call > div,
.demo-hub-page .coach-call > form {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .coach-call > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .coach-call > div > p {
  margin-bottom: 1rem;
  color: #f1c6c4;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-hub-page .coach-call > div h3 {
  max-width: 42rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 6vw, 6.4rem);
  line-height: 0.86;
}

.demo-hub-page .coach-call > div > strong {
  margin: 1rem 0 2rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 400;
}

.demo-hub-page .coach-call > div figure {
  min-height: 20rem;
  margin-top: auto;
}

.demo-hub-page .coach-call > form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem;
  background: #fbf6ee;
  color: #382b29;
}

.demo-hub-page .coach-call > form > div {
  display: flex;
  gap: 0.9rem;
}

.demo-hub-page .coach-call > form > div label {
  width: 50%;
}

.demo-hub-page .coach-call > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .coach-call > form label span {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .coach-call > form input,
.demo-hub-page .coach-call > form select,
.demo-hub-page .coach-call > form textarea {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid rgba(56, 43, 41, 0.22);
  border-radius: 0;
  background: #fff;
  color: inherit;
  font-size: 0.72rem;
}

.demo-hub-page .coach-call > form > button {
  min-height: 3.4rem;
  border: 0;
  background: #7b3948;
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .coach-call > form aside {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px solid rgba(56, 43, 41, 0.24);
  background: #e5d8c9;
}

.demo-hub-page .coach-call > form aside strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
}

.demo-hub-page .coach-call > form aside span,
.demo-hub-page .coach-call > form aside p,
.demo-hub-page .coach-call > form aside small {
  font-size: 0.65rem;
  line-height: 1.45;
}

.demo-hub-page .coach-footer {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem;
  background: #392d2b;
  color: #fffaf2;
}

.demo-hub-page .coach-footer > a {
  width: 27%;
}

.demo-hub-page .coach-footer > div {
  display: flex;
  width: 18%;
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .coach-footer > div p {
  margin-bottom: 0.4rem;
  color: #daa8ae;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .coach-footer > div a,
.demo-hub-page .coach-footer > div span {
  font-size: 0.65rem;
}

.demo-hub-page .coach-footer blockquote {
  margin-left: auto;
  color: #daa8ae;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.3;
  text-align: right;
}@media (max-width: 820px) {
  .demo-hub-page .demo-site--consultant .consultant-nav,
  .demo-hub-page .demo-site--consultant .coach-nav,
  .demo-hub-page .demo-site--coach .consultant-nav,
  .demo-hub-page .demo-site--coach .coach-nav {
    padding: 0 1.5rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-nav nav,
  .demo-hub-page .demo-site--consultant .coach-nav nav,
  .demo-hub-page .demo-site--coach .consultant-nav nav,
  .demo-hub-page .demo-site--coach .coach-nav nav {
    display: none;
  }
  .demo-hub-page .demo-site--consultant .consultant-call-link,
  .demo-hub-page .demo-site--consultant .coach-nav > a:last-child,
  .demo-hub-page .demo-site--coach .consultant-call-link,
  .demo-hub-page .demo-site--coach .coach-nav > a:last-child {
    margin-left: auto;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero,
  .demo-hub-page .demo-site--coach .consultant-hero {
    min-height: 48rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero__copy,
  .demo-hub-page .demo-site--coach .consultant-hero__copy {
    width: 100%;
    padding: 4rem 1.5rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero > aside,
  .demo-hub-page .demo-site--coach .consultant-hero > aside {
    display: none;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems,
  .demo-hub-page .demo-site--consultant .consultant-services,
  .demo-hub-page .demo-site--consultant .consultant-fit,
  .demo-hub-page .demo-site--consultant .consultant-process,
  .demo-hub-page .demo-site--consultant .consultant-proof,
  .demo-hub-page .demo-site--consultant .consultant-call,
  .demo-hub-page .demo-site--consultant .coach-for,
  .demo-hub-page .demo-site--consultant .coach-method,
  .demo-hub-page .demo-site--consultant .coach-options,
  .demo-hub-page .demo-site--consultant .coach-call,
  .demo-hub-page .demo-site--coach .consultant-problems,
  .demo-hub-page .demo-site--coach .consultant-services,
  .demo-hub-page .demo-site--coach .consultant-fit,
  .demo-hub-page .demo-site--coach .consultant-process,
  .demo-hub-page .demo-site--coach .consultant-proof,
  .demo-hub-page .demo-site--coach .consultant-call,
  .demo-hub-page .demo-site--coach .coach-for,
  .demo-hub-page .demo-site--coach .coach-method,
  .demo-hub-page .demo-site--coach .coach-options,
  .demo-hub-page .demo-site--coach .coach-call {
    padding: 5rem 1.5rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems > header,
  .demo-hub-page .demo-site--consultant .consultant-services > header,
  .demo-hub-page .demo-site--consultant .consultant-process,
  .demo-hub-page .demo-site--consultant .consultant-proof > header,
  .demo-hub-page .demo-site--consultant .consultant-call,
  .demo-hub-page .demo-site--consultant .coach-hero,
  .demo-hub-page .demo-site--consultant .coach-for > header,
  .demo-hub-page .demo-site--consultant .coach-method,
  .demo-hub-page .demo-site--consultant .coach-options > header,
  .demo-hub-page .demo-site--consultant .coach-about,
  .demo-hub-page .demo-site--consultant .coach-call,
  .demo-hub-page .demo-site--coach .consultant-problems > header,
  .demo-hub-page .demo-site--coach .consultant-services > header,
  .demo-hub-page .demo-site--coach .consultant-process,
  .demo-hub-page .demo-site--coach .consultant-proof > header,
  .demo-hub-page .demo-site--coach .consultant-call,
  .demo-hub-page .demo-site--coach .coach-hero,
  .demo-hub-page .demo-site--coach .coach-for > header,
  .demo-hub-page .demo-site--coach .coach-method,
  .demo-hub-page .demo-site--coach .coach-options > header,
  .demo-hub-page .demo-site--coach .coach-about,
  .demo-hub-page .demo-site--coach .coach-call {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems > header p,
  .demo-hub-page .demo-site--consultant .consultant-problems > header h3,
  .demo-hub-page .demo-site--consultant .consultant-problems > header span,
  .demo-hub-page .demo-site--consultant .consultant-services > header p,
  .demo-hub-page .demo-site--consultant .consultant-process > header,
  .demo-hub-page .demo-site--consultant .consultant-process > div,
  .demo-hub-page .demo-site--consultant .consultant-proof > header p,
  .demo-hub-page .demo-site--consultant .consultant-proof > header h3,
  .demo-hub-page .demo-site--consultant .consultant-proof > header span,
  .demo-hub-page .demo-site--consultant .consultant-call > div,
  .demo-hub-page .demo-site--consultant .consultant-call > form,
  .demo-hub-page .demo-site--consultant .coach-hero__copy,
  .demo-hub-page .demo-site--consultant .coach-hero > figure,
  .demo-hub-page .demo-site--consultant .coach-hero > aside,
  .demo-hub-page .demo-site--consultant .coach-for > header p,
  .demo-hub-page .demo-site--consultant .coach-for > header h3,
  .demo-hub-page .demo-site--consultant .coach-for > header span,
  .demo-hub-page .demo-site--consultant .coach-method__intro,
  .demo-hub-page .demo-site--consultant .coach-method__steps,
  .demo-hub-page .demo-site--consultant .coach-options > header p,
  .demo-hub-page .demo-site--consultant .coach-options > header h3,
  .demo-hub-page .demo-site--consultant .coach-options > header > span,
  .demo-hub-page .demo-site--consultant .coach-about figure,
  .demo-hub-page .demo-site--consultant .coach-about > div,
  .demo-hub-page .demo-site--consultant .coach-call > div,
  .demo-hub-page .demo-site--consultant .coach-call > form,
  .demo-hub-page .demo-site--coach .consultant-problems > header p,
  .demo-hub-page .demo-site--coach .consultant-problems > header h3,
  .demo-hub-page .demo-site--coach .consultant-problems > header span,
  .demo-hub-page .demo-site--coach .consultant-services > header p,
  .demo-hub-page .demo-site--coach .consultant-process > header,
  .demo-hub-page .demo-site--coach .consultant-process > div,
  .demo-hub-page .demo-site--coach .consultant-proof > header p,
  .demo-hub-page .demo-site--coach .consultant-proof > header h3,
  .demo-hub-page .demo-site--coach .consultant-proof > header span,
  .demo-hub-page .demo-site--coach .consultant-call > div,
  .demo-hub-page .demo-site--coach .consultant-call > form,
  .demo-hub-page .demo-site--coach .coach-hero__copy,
  .demo-hub-page .demo-site--coach .coach-hero > figure,
  .demo-hub-page .demo-site--coach .coach-hero > aside,
  .demo-hub-page .demo-site--coach .coach-for > header p,
  .demo-hub-page .demo-site--coach .coach-for > header h3,
  .demo-hub-page .demo-site--coach .coach-for > header span,
  .demo-hub-page .demo-site--coach .coach-method__intro,
  .demo-hub-page .demo-site--coach .coach-method__steps,
  .demo-hub-page .demo-site--coach .coach-options > header p,
  .demo-hub-page .demo-site--coach .coach-options > header h3,
  .demo-hub-page .demo-site--coach .coach-options > header > span,
  .demo-hub-page .demo-site--coach .coach-about figure,
  .demo-hub-page .demo-site--coach .coach-about > div,
  .demo-hub-page .demo-site--coach .coach-call > div,
  .demo-hub-page .demo-site--coach .coach-call > form {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems > div button,
  .demo-hub-page .demo-site--coach .consultant-problems > div button {
    width: calc(50% - 0.35rem);
  }
  .demo-hub-page .demo-site--consultant .consultant-services > div,
  .demo-hub-page .demo-site--consultant .consultant-proof > div,
  .demo-hub-page .demo-site--consultant .coach-options > div,
  .demo-hub-page .demo-site--coach .consultant-services > div,
  .demo-hub-page .demo-site--coach .consultant-proof > div,
  .demo-hub-page .demo-site--coach .coach-options > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--consultant .consultant-services > div article,
  .demo-hub-page .demo-site--consultant .coach-options > div article,
  .demo-hub-page .demo-site--coach .consultant-services > div article,
  .demo-hub-page .demo-site--coach .coach-options > div article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .demo-site--consultant .consultant-fit > div:first-child,
  .demo-hub-page .demo-site--consultant .consultant-fit > div:nth-child(2),
  .demo-hub-page .demo-site--coach .consultant-fit > div:first-child,
  .demo-hub-page .demo-site--coach .consultant-fit > div:nth-child(2) {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .consultant-process > header span,
  .demo-hub-page .demo-site--coach .consultant-process > header span {
    margin-top: 2rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-footer,
  .demo-hub-page .demo-site--consultant .coach-footer,
  .demo-hub-page .demo-site--coach .consultant-footer,
  .demo-hub-page .demo-site--coach .coach-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--consultant .consultant-footer > a,
  .demo-hub-page .demo-site--consultant .coach-footer > a,
  .demo-hub-page .demo-site--coach .consultant-footer > a,
  .demo-hub-page .demo-site--coach .coach-footer > a {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .coach-hero,
  .demo-hub-page .demo-site--coach .coach-hero {
    padding: 3rem 1.5rem;
  }
  .demo-hub-page .demo-site--consultant .coach-hero__copy,
  .demo-hub-page .demo-site--coach .coach-hero__copy {
    padding-right: 0;
  }
  .demo-hub-page .demo-site--consultant .coach-hero > figure,
  .demo-hub-page .demo-site--coach .coach-hero > figure {
    min-height: 40rem;
  }
  .demo-hub-page .demo-site--consultant .coach-hero > aside,
  .demo-hub-page .demo-site--coach .coach-hero > aside {
    align-self: auto;
  }
  .demo-hub-page .demo-site--consultant .coach-about figure,
  .demo-hub-page .demo-site--coach .coach-about figure {
    min-height: 40rem;
  }
  .demo-hub-page .demo-site--consultant .coach-about > div,
  .demo-hub-page .demo-site--coach .coach-about > div {
    padding: 5rem 1.5rem;
  }}@media (max-width: 560px) {
  .demo-hub-page .demo-site--consultant .consultant-nav,
  .demo-hub-page .demo-site--consultant .coach-nav,
  .demo-hub-page .demo-site--coach .consultant-nav,
  .demo-hub-page .demo-site--coach .coach-nav {
    min-height: 4.8rem;
    padding: 0 1rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-brand small,
  .demo-hub-page .demo-site--consultant .coach-nav > a:last-child,
  .demo-hub-page .demo-site--coach .consultant-brand small,
  .demo-hub-page .demo-site--coach .coach-nav > a:last-child {
    display: none;
  }
  .demo-hub-page .demo-site--consultant .consultant-call-link,
  .demo-hub-page .demo-site--coach .consultant-call-link {
    padding: 0.55rem 0.7rem;
    font-size: 0.48rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero__copy h2,
  .demo-hub-page .demo-site--consultant .coach-hero__copy h2,
  .demo-hub-page .demo-site--coach .consultant-hero__copy h2,
  .demo-hub-page .demo-site--coach .coach-hero__copy h2 {
    font-size: 3.45rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero__copy > div,
  .demo-hub-page .demo-site--consultant .coach-hero__copy > div,
  .demo-hub-page .demo-site--coach .consultant-hero__copy > div,
  .demo-hub-page .demo-site--coach .coach-hero__copy > div {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems,
  .demo-hub-page .demo-site--consultant .consultant-services,
  .demo-hub-page .demo-site--consultant .consultant-fit,
  .demo-hub-page .demo-site--consultant .consultant-process,
  .demo-hub-page .demo-site--consultant .consultant-proof,
  .demo-hub-page .demo-site--consultant .consultant-call,
  .demo-hub-page .demo-site--consultant .coach-for,
  .demo-hub-page .demo-site--consultant .coach-method,
  .demo-hub-page .demo-site--consultant .coach-options,
  .demo-hub-page .demo-site--consultant .coach-call,
  .demo-hub-page .demo-site--coach .consultant-problems,
  .demo-hub-page .demo-site--coach .consultant-services,
  .demo-hub-page .demo-site--coach .consultant-fit,
  .demo-hub-page .demo-site--coach .consultant-process,
  .demo-hub-page .demo-site--coach .consultant-proof,
  .demo-hub-page .demo-site--coach .consultant-call,
  .demo-hub-page .demo-site--coach .coach-for,
  .demo-hub-page .demo-site--coach .coach-method,
  .demo-hub-page .demo-site--coach .coach-options,
  .demo-hub-page .demo-site--coach .coach-call {
    padding: 4rem 1rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems > div,
  .demo-hub-page .demo-site--consultant .consultant-services > div,
  .demo-hub-page .demo-site--consultant .consultant-proof > div,
  .demo-hub-page .demo-site--consultant .coach-for > div,
  .demo-hub-page .demo-site--consultant .coach-options > div,
  .demo-hub-page .demo-site--coach .consultant-problems > div,
  .demo-hub-page .demo-site--coach .consultant-services > div,
  .demo-hub-page .demo-site--coach .consultant-proof > div,
  .demo-hub-page .demo-site--coach .coach-for > div,
  .demo-hub-page .demo-site--coach .coach-options > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems > div button,
  .demo-hub-page .demo-site--consultant .consultant-services > div article,
  .demo-hub-page .demo-site--consultant .consultant-proof > div article,
  .demo-hub-page .demo-site--consultant .coach-for > div button,
  .demo-hub-page .demo-site--consultant .coach-options > div article,
  .demo-hub-page .demo-site--coach .consultant-problems > div button,
  .demo-hub-page .demo-site--coach .consultant-services > div article,
  .demo-hub-page .demo-site--coach .consultant-proof > div article,
  .demo-hub-page .demo-site--coach .coach-for > div button,
  .demo-hub-page .demo-site--coach .coach-options > div article {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .consultant-call > form,
  .demo-hub-page .demo-site--consultant .coach-call > form,
  .demo-hub-page .demo-site--coach .consultant-call > form,
  .demo-hub-page .demo-site--coach .coach-call > form {
    padding: 1.2rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-call > form > div,
  .demo-hub-page .demo-site--consultant .coach-call > form > div,
  .demo-hub-page .demo-site--coach .consultant-call > form > div,
  .demo-hub-page .demo-site--coach .coach-call > form > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--consultant .consultant-call > form > div label,
  .demo-hub-page .demo-site--consultant .coach-call > form > div label,
  .demo-hub-page .demo-site--coach .consultant-call > form > div label,
  .demo-hub-page .demo-site--coach .coach-call > form > div label {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .consultant-footer,
  .demo-hub-page .demo-site--consultant .coach-footer,
  .demo-hub-page .demo-site--coach .consultant-footer,
  .demo-hub-page .demo-site--coach .coach-footer {
    flex-direction: column;
    padding: 3rem 1rem;
  }
  .demo-hub-page .demo-site--consultant .consultant-footer > div,
  .demo-hub-page .demo-site--consultant .consultant-footer > strong,
  .demo-hub-page .demo-site--consultant .consultant-footer blockquote,
  .demo-hub-page .demo-site--consultant .coach-footer > div,
  .demo-hub-page .demo-site--consultant .coach-footer > strong,
  .demo-hub-page .demo-site--consultant .coach-footer blockquote,
  .demo-hub-page .demo-site--coach .consultant-footer > div,
  .demo-hub-page .demo-site--coach .consultant-footer > strong,
  .demo-hub-page .demo-site--coach .consultant-footer blockquote,
  .demo-hub-page .demo-site--coach .coach-footer > div,
  .demo-hub-page .demo-site--coach .coach-footer > strong,
  .demo-hub-page .demo-site--coach .coach-footer blockquote {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .demo-hub-page .demo-site--consultant .coach-hero,
  .demo-hub-page .demo-site--coach .coach-hero {
    padding: 2.5rem 1rem;
  }
  .demo-hub-page .demo-site--consultant .coach-hero > figure,
  .demo-hub-page .demo-site--coach .coach-hero > figure {
    min-height: 31rem;
  }
  .demo-hub-page .demo-site--consultant .coach-for > div button,
  .demo-hub-page .demo-site--coach .coach-for > div button {
    min-height: 10rem;
  }
  .demo-hub-page .demo-site--consultant .coach-method__steps,
  .demo-hub-page .demo-site--coach .coach-method__steps {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--consultant .coach-method__steps article,
  .demo-hub-page .demo-site--coach .coach-method__steps article {
    width: 100%;
    min-height: 15rem;
  }
  .demo-hub-page .demo-site--consultant .coach-about figure,
  .demo-hub-page .demo-site--coach .coach-about figure {
    min-height: 31rem;
  }
  .demo-hub-page .demo-site--consultant .coach-about > div,
  .demo-hub-page .demo-site--coach .coach-about > div {
    padding: 4rem 1rem;
  }}
.demo-hub-page .demo-site--salon {
  background: #f4eee8;
  color: #2b1c1c;
  font-family: "GC Neue Machine", Arial, sans-serif;
}

.demo-hub-page .demo-site--salon h2,
.demo-hub-page .demo-site--salon h3,
.demo-hub-page .demo-site--salon h4,
.demo-hub-page .demo-site--salon p,
.demo-hub-page .demo-site--salon figure,
.demo-hub-page .demo-site--salon blockquote {
  margin: 0;
}

.demo-hub-page .demo-site--salon h2,
.demo-hub-page .demo-site--salon h3,
.demo-hub-page .demo-site--salon h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.055em;
  text-transform: none;
}

.demo-hub-page .demo-site--salon a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--salon button,
.demo-hub-page .demo-site--salon input,
.demo-hub-page .demo-site--salon select,
.demo-hub-page .demo-site--salon textarea {
  font: inherit;
}

.demo-hub-page .demo-site--salon button,
.demo-hub-page .demo-site--salon a {
  cursor: pointer;
}

.demo-hub-page .demo-site--salon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--salon [hidden] {
  display: none !important;
}

.demo-hub-page .salon-site {
  overflow: hidden;
  background: #f8f4ef;
}

.demo-hub-page .salon-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  gap: 2rem;
  padding: 0 4.5rem;
  border-bottom: 1px solid rgba(43, 28, 28, 0.18);
  background: rgba(248, 244, 239, 0.94);
  backdrop-filter: blur(14px);
}

.demo-hub-page .salon-nav nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.demo-hub-page .salon-nav nav a {
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .salon-nav nav a:hover {
  border-color: currentColor;
}

.demo-hub-page .salon-brand {
  display: flex;
  min-width: 10rem;
  flex-direction: column;
  line-height: 0.8;
}

.demo-hub-page .salon-brand span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.38rem;
  letter-spacing: 0.16em;
}

.demo-hub-page .salon-brand i {
  color: #a6533e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  text-align: right;
}

.demo-hub-page .salon-book-link,
.demo-hub-page .salon-hero__copy a:first-child,
.demo-hub-page .salon-service-help + a,
.demo-hub-page .salon-final a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.35rem;
  border: 1px solid #2b1c1c;
  background: #2b1c1c;
  color: #fff9f3 !important;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .salon-book-link {
  margin-left: 0.5rem;
  border-color: #a6533e;
  background: #a6533e;
}

.demo-hub-page .salon-hero {
  display: flex;
  min-height: 49rem;
  padding: 4.5rem;
  gap: 1.25rem;
  background: #f8f4ef;
}

.demo-hub-page .salon-hero__copy {
  display: flex;
  width: 43%;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 3.5rem 2rem 0;
}

.demo-hub-page .salon-hero__copy > p,
.demo-hub-page .salon-hero__copy > span {
  max-width: 29rem;
}

.demo-hub-page .salon-hero__copy > p {
  margin-bottom: 2rem;
  color: #a6533e;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.demo-hub-page .salon-hero__copy h2 {
  max-width: 42rem;
  font-size: clamp(3.7rem, 7vw, 7.6rem);
  line-height: 0.84;
}

.demo-hub-page .salon-hero__copy h2 em {
  display: block;
  color: #a6533e;
  font-weight: 400;
}

.demo-hub-page .salon-hero__copy > span {
  margin-top: 2rem;
  color: #665353;
  font-size: 0.9rem;
  line-height: 1.65;
}

.demo-hub-page .salon-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .salon-hero__copy > div a:last-child {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid currentColor;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .salon-hero__main {
  position: relative;
  width: 42%;
  overflow: hidden;
  border-radius: 15rem 15rem 0.35rem 0.35rem;
}

.demo-hub-page .salon-hero__main img {
  -o-object-position: 55% center;
  object-position: 55% center;
}

.demo-hub-page .salon-hero__main figcaption {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.7rem 1rem;
  background: rgba(248, 244, 239, 0.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  font-style: italic;
}

.demo-hub-page .salon-hero__detail {
  display: flex;
  width: 15%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
}

.demo-hub-page .salon-hero__detail figure {
  min-height: 16rem;
  overflow: hidden;
  border-radius: 8rem 8rem 0.25rem 0.25rem;
}

.demo-hub-page .salon-hero__detail span {
  max-width: 11rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.2;
}

.demo-hub-page .salon-marquee {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
  gap: 1.5rem;
  padding: 1.1rem 2rem;
  background: #a6533e;
  color: #fff9f3;
  white-space: nowrap;
}

.demo-hub-page .salon-marquee span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-style: italic;
}

.demo-hub-page .salon-services,
.demo-hub-page .salon-work,
.demo-hub-page .salon-team {
  padding: 7rem 4.5rem;
}

.demo-hub-page .salon-services {
  background: #e9d8cf;
}

.demo-hub-page .salon-services > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .salon-services > header p {
  width: 21%;
  color: #a6533e;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .salon-services > header h3 {
  width: 55%;
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: 0.95;
}

.demo-hub-page .salon-services > header button {
  margin-left: auto;
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .salon-service-list {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.demo-hub-page .salon-service-list article {
  display: flex;
  width: calc(25% - 0.75rem);
  flex-direction: column;
  padding: 0.75rem;
  border: 1px solid rgba(43, 28, 28, 0.2);
  background: #f8f4ef;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.demo-hub-page .salon-service-list article:hover,
.demo-hub-page .salon-service-list article.is-selected {
  transform: translateY(-0.45rem);
  box-shadow: 0 1.2rem 2rem rgba(83, 48, 42, 0.12);
}

.demo-hub-page .salon-service-list article > span {
  padding: 0.35rem 0 0.85rem;
  color: #a6533e;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .salon-service-list article figure {
  height: 21rem;
  overflow: hidden;
}

.demo-hub-page .salon-service-list article h4 {
  margin-top: 1.15rem;
  font-size: 1.65rem;
}

.demo-hub-page .salon-service-list article p {
  margin: 0.4rem 0 1rem;
  color: #a6533e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.demo-hub-page .salon-service-list article button {
  align-self: flex-start;
  margin-top: auto;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .salon-service-help {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1rem;
  padding: 2rem;
  background: #2b1c1c;
  color: #fff9f3;
}

.demo-hub-page .salon-service-help > div:first-child {
  width: 25%;
}

.demo-hub-page .salon-service-help > div:first-child p {
  margin-bottom: 0.5rem;
  color: #d99882;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .salon-service-help > div:first-child h4 {
  font-size: 1.75rem;
}

.demo-hub-page .salon-service-help > div:nth-child(2) {
  display: flex;
  width: 50%;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.demo-hub-page .salon-service-help > div:nth-child(2) button {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 249, 243, 0.35);
  border-radius: 5rem;
  background: transparent;
  color: inherit;
  font-size: 0.65rem;
}

.demo-hub-page .salon-service-help > div:nth-child(2) button:hover,
.demo-hub-page .salon-service-help > div:nth-child(2) button.is-active {
  border-color: #d99882;
  background: #d99882;
  color: #2b1c1c;
}

.demo-hub-page .salon-service-help > p {
  width: 25%;
  color: #e5d3cb;
  font-size: 0.75rem;
  line-height: 1.55;
}

.demo-hub-page .salon-work {
  background: #f8f4ef;
}

.demo-hub-page .salon-work > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.demo-hub-page .salon-work > header > div {
  width: 60%;
}

.demo-hub-page .salon-work > header > div p {
  margin-bottom: 0.75rem;
  color: #a6533e;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .salon-work > header > div h3 {
  font-size: clamp(3rem, 5.5vw, 6rem);
  line-height: 0.9;
}

.demo-hub-page .salon-work > header > span {
  max-width: 27rem;
  color: #6f5a56;
  font-size: 0.78rem;
  line-height: 1.6;
}

.demo-hub-page .salon-work__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.demo-hub-page .salon-work__filters button {
  padding: 0.65rem 1rem;
  border: 1px solid rgba(43, 28, 28, 0.3);
  border-radius: 4rem;
  background: transparent;
  color: inherit;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .salon-work__filters button:hover,
.demo-hub-page .salon-work__filters button.is-active {
  background: #2b1c1c;
  color: #fff9f3;
}

.demo-hub-page .salon-work__gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
}

.demo-hub-page .salon-work__gallery figure {
  position: relative;
  width: calc(33.333% - 0.667rem);
  height: 30rem;
  overflow: hidden;
  background: #ddd0c8;
}

.demo-hub-page .salon-work__gallery figure:first-child,
.demo-hub-page .salon-work__gallery figure:nth-child(5) {
  width: calc(40% - 0.5rem);
}

.demo-hub-page .salon-work__gallery figure:nth-child(2),
.demo-hub-page .salon-work__gallery figure:nth-child(4) {
  width: calc(60% - 0.5rem);
}

.demo-hub-page .salon-work__gallery figure img {
  transition: transform 500ms ease;
}

.demo-hub-page .salon-work__gallery figure:hover img {
  transform: scale(1.035);
}

.demo-hub-page .salon-work__gallery figure figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: rgba(248, 244, 239, 0.9);
  backdrop-filter: blur(8px);
}

.demo-hub-page .salon-work__gallery figure figcaption span {
  color: #a6533e;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .salon-work__gallery figure figcaption b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  text-align: right;
}

.demo-hub-page .salon-team {
  background: #493033;
  color: #fff7f1;
}

.demo-hub-page .salon-team > header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.demo-hub-page .salon-team > header p {
  width: 20%;
  color: #e5a18c;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .salon-team > header h3 {
  width: 50%;
  font-size: clamp(3rem, 5vw, 5.4rem);
  line-height: 0.9;
}

.demo-hub-page .salon-team > header span {
  max-width: 24rem;
  color: #dfcbc7;
  font-size: 0.76rem;
  line-height: 1.55;
}

.demo-hub-page .salon-team > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .salon-team > div article {
  display: flex;
  width: calc(33.333% - 0.667rem);
  min-height: 26rem;
  background: #f5ede7;
  color: #2b1c1c;
}

.demo-hub-page .salon-team > div article figure,
.demo-hub-page .salon-team > div article > div {
  width: 50%;
}

.demo-hub-page .salon-team > div article > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.4rem;
}

.demo-hub-page .salon-team > div article > div > span {
  color: #a6533e;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .salon-team > div article > div h4 {
  margin: 0.55rem 0 1rem;
  font-size: 1.65rem;
  line-height: 1;
}

.demo-hub-page .salon-team > div article > div p,
.demo-hub-page .salon-team > div article > div b {
  font-size: 0.65rem;
  line-height: 1.45;
}

.demo-hub-page .salon-team > div article > div b {
  margin: 0.55rem 0 1.25rem;
  color: #a6533e;
  font-weight: 400;
}

.demo-hub-page .salon-team > div article > div button {
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.demo-hub-page .salon-team > a {
  display: table;
  margin: 2.5rem auto 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .salon-first-visit,
.demo-hub-page .salon-book,
.demo-hub-page .salon-final {
  display: flex;
}

.demo-hub-page .salon-first-visit {
  min-height: 46rem;
  background: #d89b81;
}

.demo-hub-page .salon-first-visit > figure,
.demo-hub-page .salon-first-visit > div {
  width: 50%;
}

.demo-hub-page .salon-first-visit > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem;
}

.demo-hub-page .salon-first-visit > div > p {
  margin-bottom: 1rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .salon-first-visit > div h3 {
  font-size: clamp(4rem, 7vw, 7rem);
  line-height: 0.85;
}

.demo-hub-page .salon-first-visit > div > strong {
  max-width: 30rem;
  margin: 1.75rem 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.25;
}

.demo-hub-page .salon-first-visit > div > span {
  margin-bottom: 0.65rem;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.demo-hub-page .salon-first-visit > div > div {
  display: flex;
  max-width: 34rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.demo-hub-page .salon-first-visit > div > div b {
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(43, 28, 28, 0.35);
  border-radius: 4rem;
  font-size: 0.65rem;
  font-weight: 400;
}

.demo-hub-page .salon-first-visit > div blockquote {
  margin: 2rem 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  font-style: italic;
}

.demo-hub-page .salon-first-visit > div button {
  align-self: flex-start;
  padding: 0.9rem 1.2rem;
  border: 1px solid #2b1c1c;
  background: #2b1c1c;
  color: #fff9f3;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .salon-book {
  align-items: stretch;
  padding: 7rem 4.5rem;
  gap: 1rem;
  background: #f8f4ef;
}

.demo-hub-page .salon-book > div,
.demo-hub-page .salon-book > form {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .salon-book > div {
  display: flex;
  flex-direction: column;
  padding-right: 5rem;
}

.demo-hub-page .salon-book > div > p {
  margin-bottom: 1rem;
  color: #a6533e;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .salon-book > div h3 {
  max-width: 35rem;
  font-size: clamp(3.4rem, 6vw, 6.4rem);
  line-height: 0.88;
}

.demo-hub-page .salon-book > div > span {
  max-width: 31rem;
  margin: 1.5rem 0 2rem;
  color: #6c5753;
  font-size: 0.8rem;
  line-height: 1.65;
}

.demo-hub-page .salon-book > div figure {
  min-height: 20rem;
  margin-top: auto;
  overflow: hidden;
  border-radius: 10rem 10rem 0 0;
}

.demo-hub-page .salon-book > form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem;
  background: #e9d8cf;
}

.demo-hub-page .salon-book > form > div {
  display: flex;
  gap: 0.9rem;
}

.demo-hub-page .salon-book > form > div label {
  width: 50%;
}

.demo-hub-page .salon-book > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .salon-book > form label > span {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .salon-book > form input,
.demo-hub-page .salon-book > form select,
.demo-hub-page .salon-book > form textarea {
  width: 100%;
  padding: 0.9rem;
  border: 0;
  border-bottom: 1px solid rgba(43, 28, 28, 0.45);
  border-radius: 0;
  outline: 0;
  background: rgba(255, 251, 247, 0.6);
  color: inherit;
  font-size: 0.75rem;
}

.demo-hub-page .salon-book > form input:focus,
.demo-hub-page .salon-book > form select:focus,
.demo-hub-page .salon-book > form textarea:focus {
  border-color: #a6533e;
  box-shadow: inset 0 -2px #a6533e;
}

.demo-hub-page .salon-book > form textarea {
  resize: vertical;
}

.demo-hub-page .salon-book > form .salon-book__major {
  flex-direction: row;
  align-items: center;
}

.demo-hub-page .salon-book > form .salon-book__major input {
  width: 1rem;
}

.demo-hub-page .salon-book > form > button {
  min-height: 3.4rem;
  border: 0;
  background: #2b1c1c;
  color: #fff9f3;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .salon-book > form aside {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem;
  border: 1px solid rgba(43, 28, 28, 0.3);
  background: #fff9f3;
}

.demo-hub-page .salon-book > form aside strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 400;
}

.demo-hub-page .salon-book > form aside span,
.demo-hub-page .salon-book > form aside p,
.demo-hub-page .salon-book > form aside small {
  font-size: 0.67rem;
  line-height: 1.5;
}

.demo-hub-page .salon-book > form aside p {
  color: #a6533e;
}

.demo-hub-page .salon-final {
  min-height: 34rem;
  background: #2b1c1c;
  color: #fff9f3;
}

.demo-hub-page .salon-final figure,
.demo-hub-page .salon-final > div {
  width: 50%;
}

.demo-hub-page .salon-final > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  text-align: center;
}

.demo-hub-page .salon-final > div p {
  margin-bottom: 1rem;
  color: #d99882;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .salon-final > div h3 {
  margin-bottom: 2rem;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 0.82;
}

.demo-hub-page .salon-final > div a {
  border-color: #fff9f3;
  background: #fff9f3;
  color: #2b1c1c !important;
}

.demo-hub-page .salon-footer {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem 4.5rem;
  background: #f8f4ef;
}

.demo-hub-page .salon-footer > a {
  width: 32%;
}

.demo-hub-page .salon-footer > div {
  display: flex;
  width: calc(22.667% - 2rem);
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .salon-footer > div p {
  margin-bottom: 0.5rem;
  color: #a6533e;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .salon-footer > div a,
.demo-hub-page .salon-footer > div span {
  font-size: 0.67rem;
}@media (max-width: 820px) {
  .demo-hub-page .demo-site--salon .salon-nav {
    padding: 0 1.5rem;
  }
  .demo-hub-page .demo-site--salon .salon-nav nav {
    display: none;
  }
  .demo-hub-page .demo-site--salon .salon-book-link {
    margin-left: auto;
  }
  .demo-hub-page .demo-site--salon .salon-hero,
  .demo-hub-page .demo-site--salon .salon-services > header,
  .demo-hub-page .demo-site--salon .salon-work > header,
  .demo-hub-page .demo-site--salon .salon-team > header,
  .demo-hub-page .demo-site--salon .salon-first-visit,
  .demo-hub-page .demo-site--salon .salon-book {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--salon .salon-hero {
    padding: 3rem 1.5rem;
  }
  .demo-hub-page .demo-site--salon .salon-hero__copy,
  .demo-hub-page .demo-site--salon .salon-hero__main,
  .demo-hub-page .demo-site--salon .salon-hero__detail,
  .demo-hub-page .demo-site--salon .salon-services > header p,
  .demo-hub-page .demo-site--salon .salon-services > header h3,
  .demo-hub-page .demo-site--salon .salon-work > header > div,
  .demo-hub-page .demo-site--salon .salon-team > header p,
  .demo-hub-page .demo-site--salon .salon-team > header h3,
  .demo-hub-page .demo-site--salon .salon-first-visit > figure,
  .demo-hub-page .demo-site--salon .salon-first-visit > div,
  .demo-hub-page .demo-site--salon .salon-book > div,
  .demo-hub-page .demo-site--salon .salon-book > form {
    width: 100%;
  }
  .demo-hub-page .demo-site--salon .salon-hero__copy {
    padding: 0;
  }
  .demo-hub-page .demo-site--salon .salon-hero__main {
    min-height: 38rem;
  }
  .demo-hub-page .demo-site--salon .salon-hero__detail {
    flex-direction: row;
    align-items: center;
  }
  .demo-hub-page .demo-site--salon .salon-hero__detail figure {
    width: 10rem;
  }
  .demo-hub-page .demo-site--salon .salon-services,
  .demo-hub-page .demo-site--salon .salon-work,
  .demo-hub-page .demo-site--salon .salon-team,
  .demo-hub-page .demo-site--salon .salon-book {
    padding: 5rem 1.5rem;
  }
  .demo-hub-page .demo-site--salon .salon-service-list,
  .demo-hub-page .demo-site--salon .salon-team > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--salon .salon-service-list article,
  .demo-hub-page .demo-site--salon .salon-team > div article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .demo-site--salon .salon-service-help {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--salon .salon-service-help > div:first-child,
  .demo-hub-page .demo-site--salon .salon-service-help > div:nth-child(2),
  .demo-hub-page .demo-site--salon .salon-service-help > p {
    width: 100%;
  }
  .demo-hub-page .demo-site--salon .salon-first-visit > figure {
    min-height: 35rem;
  }
  .demo-hub-page .demo-site--salon .salon-first-visit > div {
    padding: 4rem 1.5rem;
  }
  .demo-hub-page .demo-site--salon .salon-book > div {
    padding-right: 0;
  }
  .demo-hub-page .demo-site--salon .salon-book > div figure {
    min-height: 28rem;
  }
  .demo-hub-page .demo-site--salon .salon-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--salon .salon-footer > a {
    width: 100%;
  }
  .demo-hub-page .demo-site--salon .salon-footer > div {
    width: calc(33.333% - 2rem);
  }}@media (max-width: 560px) {
  .demo-hub-page .demo-site--salon .salon-nav {
    min-height: 4.7rem;
    padding: 0 1rem;
  }
  .demo-hub-page .demo-site--salon .salon-brand {
    min-width: 7.5rem;
  }
  .demo-hub-page .demo-site--salon .salon-brand span {
    font-size: 1rem;
  }
  .demo-hub-page .demo-site--salon .salon-book-link {
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.48rem;
  }
  .demo-hub-page .demo-site--salon .salon-hero {
    min-height: auto;
    padding: 2.5rem 1rem;
  }
  .demo-hub-page .demo-site--salon .salon-hero__copy h2 {
    font-size: 3.5rem;
  }
  .demo-hub-page .demo-site--salon .salon-hero__main {
    min-height: 30rem;
  }
  .demo-hub-page .demo-site--salon .salon-hero__detail {
    display: none;
  }
  .demo-hub-page .demo-site--salon .salon-marquee {
    justify-content: flex-start;
  }
  .demo-hub-page .demo-site--salon .salon-services,
  .demo-hub-page .demo-site--salon .salon-work,
  .demo-hub-page .demo-site--salon .salon-team,
  .demo-hub-page .demo-site--salon .salon-book {
    padding: 4rem 1rem;
  }
  .demo-hub-page .demo-site--salon .salon-services > header {
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--salon .salon-service-list,
  .demo-hub-page .demo-site--salon .salon-team > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--salon .salon-service-list article,
  .demo-hub-page .demo-site--salon .salon-team > div article {
    width: 100%;
  }
  .demo-hub-page .demo-site--salon .salon-service-list article figure {
    height: 26rem;
  }
  .demo-hub-page .demo-site--salon .salon-service-help {
    padding: 1.25rem;
  }
  .demo-hub-page .demo-site--salon .salon-work__gallery {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--salon .salon-work__gallery figure,
  .demo-hub-page .demo-site--salon .salon-work__gallery figure:first-child,
  .demo-hub-page .demo-site--salon .salon-work__gallery figure:nth-child(2),
  .demo-hub-page .demo-site--salon .salon-work__gallery figure:nth-child(4),
  .demo-hub-page .demo-site--salon .salon-work__gallery figure:nth-child(5) {
    width: 100%;
    height: 28rem;
  }
  .demo-hub-page .demo-site--salon .salon-team > div article {
    min-height: 24rem;
  }
  .demo-hub-page .demo-site--salon .salon-first-visit > figure {
    min-height: 28rem;
  }
  .demo-hub-page .demo-site--salon .salon-first-visit > div {
    padding: 3.5rem 1rem;
  }
  .demo-hub-page .demo-site--salon .salon-book > form {
    padding: 1.25rem;
  }
  .demo-hub-page .demo-site--salon .salon-book > form > div {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--salon .salon-book > form > div label {
    width: 100%;
  }
  .demo-hub-page .demo-site--salon .salon-book > div figure {
    min-height: 23rem;
  }
  .demo-hub-page .demo-site--salon .salon-final {
    min-height: auto;
    flex-direction: column;
  }
  .demo-hub-page .demo-site--salon .salon-final figure,
  .demo-hub-page .demo-site--salon .salon-final > div {
    width: 100%;
    min-height: 26rem;
  }
  .demo-hub-page .demo-site--salon .salon-final > div {
    padding: 3rem 1rem;
  }
  .demo-hub-page .demo-site--salon .salon-footer {
    flex-direction: column;
    padding: 3rem 1rem;
  }
  .demo-hub-page .demo-site--salon .salon-footer > div {
    width: 100%;
  }}
.demo-hub-page .demo-site--grooming {
  background: #fff8ec;
  color: #2f211b;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--grooming h2,
.demo-hub-page .demo-site--grooming h3,
.demo-hub-page .demo-site--grooming h4,
.demo-hub-page .demo-site--grooming p {
  margin-top: 0;
}

.demo-hub-page .demo-site--grooming h2,
.demo-hub-page .demo-site--grooming h3,
.demo-hub-page .demo-site--grooming h4 {
  font-weight: 700;
  letter-spacing: -0.065em;
}

.demo-hub-page .demo-site--grooming a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--grooming button,
.demo-hub-page .demo-site--grooming input,
.demo-hub-page .demo-site--grooming select,
.demo-hub-page .demo-site--grooming textarea {
  font: inherit;
}

.demo-hub-page .demo-site--grooming img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .grooming-site {
  position: relative;
  overflow: hidden;
  background: #fff8ec;
}

.demo-hub-page .grooming-nav {
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(47, 33, 27, 0.14);
  background: #fffdf7;
}

.demo-hub-page .grooming-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.4vw, 2.7rem);
}

.demo-hub-page .grooming-nav nav a {
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-brand {
  display: flex;
  min-width: 13rem;
  flex-direction: column;
  line-height: 0.86;
}

.demo-hub-page .grooming-brand span {
  color: #f54879;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.demo-hub-page .grooming-brand strong {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.demo-hub-page .grooming-book-link {
  padding: 0.95rem 1.3rem;
  border-radius: 999px;
  background: #2f211b;
  color: #fff !important;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-hero {
  position: relative;
  display: flex;
  min-height: 59rem;
  background: #dff16d;
}

.demo-hub-page .grooming-hero > aside {
  position: absolute;
  right: 2rem;
  top: 2rem;
  display: flex;
  width: min(20rem, 23%);
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(47, 33, 27, 0.25);
  border-radius: 1.5rem;
  background: #fff8ec;
}

.demo-hub-page .grooming-hero > aside figure {
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
}

.demo-hub-page .grooming-hero > aside strong {
  font-size: 0.8rem;
  line-height: 1.4;
}

.demo-hub-page .grooming-hero__copy {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 7vw, 8rem) clamp(2rem, 6vw, 7rem);
}

.demo-hub-page .grooming-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #684b2e;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-hero__copy h2 {
  margin-bottom: 2rem;
  font-size: clamp(5rem, 8vw, 9rem);
  line-height: 0.8;
}

.demo-hub-page .grooming-hero__copy h2 em {
  color: #f54879;
  font-style: normal;
}

.demo-hub-page .grooming-hero__copy > span {
  max-width: 38rem;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.6;
}

.demo-hub-page .grooming-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .grooming-hero__copy > div a {
  padding: 1rem 1.3rem;
  border: 1px solid #2f211b;
  border-radius: 999px;
  font-size: 0.57rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .grooming-hero__copy > div a:first-child {
  background: #2f211b;
  color: #fff;
}

.demo-hub-page .grooming-hero__dog {
  position: relative;
  display: flex;
  width: 48%;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: #f6b8d1;
  border-radius: 12rem 0 0 0;
}

.demo-hub-page .grooming-hero__dog figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.demo-hub-page .grooming-hero__dog > span {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: #fff8ec;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .grooming-ticker {
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3.5rem);
  padding: 1rem clamp(1.25rem, 4vw, 4.5rem);
  overflow: hidden;
  background: #f54879;
  color: #fff;
}

.demo-hub-page .grooming-ticker span {
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-ticker i {
  color: #dff16d;
  font-style: normal;
}

.demo-hub-page .grooming-services,
.demo-hub-page .grooming-gallery {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .grooming-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .grooming-heading > p {
  width: 8rem;
  flex: 0 0 8rem;
  color: #f54879;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-heading h3 {
  width: min(62%, 62rem);
  margin-bottom: 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.86;
}

.demo-hub-page .grooming-heading > span {
  width: min(20%, 22rem);
  color: #75645b;
  line-height: 1.6;
}

.demo-hub-page .grooming-service-list {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .grooming-service-list article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #f6b8d1;
}

.demo-hub-page .grooming-service-list article:nth-child(2) {
  background: #aedeef;
}

.demo-hub-page .grooming-service-list article:nth-child(3) {
  background: #dff16d;
}

.demo-hub-page .grooming-service-list figure {
  order: 2;
  aspect-ratio: 0.9;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .grooming-service-list article > div {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem;
}

.demo-hub-page .grooming-service-list span {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-service-list h4 {
  margin: 0.75rem 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 0.95;
}

.demo-hub-page .grooming-service-list p {
  line-height: 1.55;
}

.demo-hub-page .grooming-service-list button {
  padding: 0 0 0.25rem;
  margin-top: auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .grooming-pricing {
  display: flex;
  min-height: 54rem;
  background: #2f211b;
  color: #fff;
}

.demo-hub-page .grooming-pricing > div {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .grooming-pricing > div > p {
  color: #ff82a7;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-pricing > div h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(4rem, 6.5vw, 7rem);
  line-height: 0.86;
}

.demo-hub-page .grooming-pricing > div > span {
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.demo-hub-page .grooming-pricing > div > div {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 2rem;
}

.demo-hub-page .grooming-pricing > div article {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-hub-page .grooming-pricing > div article strong {
  font-size: 1.05rem;
}

.demo-hub-page .grooming-pricing > div article b {
  color: #dff16d;
}

.demo-hub-page .grooming-pricing > div > a {
  margin-top: 2rem;
  padding: 1rem 1.4rem;
  border-radius: 999px;
  background: #f54879;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .grooming-pricing > figure {
  width: 48%;
  margin: 0;
  overflow: hidden;
  border-radius: 11rem 0 0 0;
}

.demo-hub-page .grooming-experience {
  display: flex;
  min-height: 61rem;
  background: #ece7ff;
}

.demo-hub-page .grooming-experience__images {
  position: relative;
  display: flex;
  width: 52%;
  align-items: flex-end;
  padding: clamp(1rem, 3vw, 3rem);
}

.demo-hub-page .grooming-experience__images figure {
  width: 80%;
  height: 88%;
  margin: 0;
  overflow: hidden;
  border-radius: 8rem 8rem 1rem 1rem;
}

.demo-hub-page .grooming-experience__images figure:last-child {
  position: absolute;
  top: 3rem;
  right: 2rem;
  width: 35%;
  height: 38%;
  border: 0.5rem solid #ece7ff;
  border-radius: 50%;
}

.demo-hub-page .grooming-experience__copy {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .grooming-experience__copy > p {
  color: #f54879;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-experience__copy h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(4rem, 6vw, 6.7rem);
  line-height: 0.86;
}

.demo-hub-page .grooming-experience__copy > span {
  color: #75645b;
}

.demo-hub-page .grooming-experience__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 2rem;
}

.demo-hub-page .grooming-experience__copy > div b {
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(47, 33, 27, 0.35);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
}

.demo-hub-page .grooming-experience__copy > strong {
  max-width: 35rem;
  font-size: 1.25rem;
  line-height: 1.45;
}

.demo-hub-page .grooming-book {
  display: flex;
  min-height: 62rem;
  background: #dff16d;
}

.demo-hub-page .grooming-book > div {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .grooming-book > div > p {
  color: #f54879;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-book > div h3 {
  margin: 1rem 0;
  font-size: clamp(4rem, 6.5vw, 7rem);
  line-height: 0.86;
}

.demo-hub-page .grooming-book > div > span {
  max-width: 36rem;
  line-height: 1.6;
}

.demo-hub-page .grooming-book > div figure {
  width: 75%;
  aspect-ratio: 1.45;
  margin: 2.5rem 0 0;
  overflow: hidden;
  border-radius: 7rem 7rem 1rem 1rem;
}

.demo-hub-page .grooming-book > form {
  display: flex;
  width: 52%;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  padding: clamp(3rem, 6vw, 7rem);
  background: #fffdf7;
}

.demo-hub-page .grooming-book > form > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .grooming-book > form > div label {
  width: 50%;
}

.demo-hub-page .grooming-book > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .grooming-book > form label > span {
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-book > form input,
.demo-hub-page .grooming-book > form select,
.demo-hub-page .grooming-book > form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(47, 33, 27, 0.3);
  border-radius: 0;
  background: transparent;
  color: inherit;
  outline: 0;
  resize: vertical;
}

.demo-hub-page .grooming-book > form input:focus,
.demo-hub-page .grooming-book > form select:focus,
.demo-hub-page .grooming-book > form textarea:focus {
  border-color: #f54879;
}

.demo-hub-page .grooming-book > form > button {
  padding: 1rem;
  border: 0;
  border-radius: 999px;
  background: #f54879;
  color: #fff;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .grooming-book > form > aside {
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  border-left: 0.35rem solid #f54879;
  background: #ffe9f1;
}

.demo-hub-page .grooming-book > form > aside strong {
  color: #b92a54;
}

.demo-hub-page .grooming-book > form > aside span,
.demo-hub-page .grooming-book > form > aside p {
  margin: 0.35rem 0 0;
  color: #70565f;
  line-height: 1.45;
}

.demo-hub-page .grooming-book > form > aside[hidden] {
  display: none;
}

.demo-hub-page .grooming-gallery {
  background: #fff8ec;
}

.demo-hub-page .grooming-gallery > header {
  display: flex;
  max-width: 75rem;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 4rem;
  text-align: center;
}

.demo-hub-page .grooming-gallery > header p {
  color: #f54879;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-gallery > header h3 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.86;
}

.demo-hub-page .grooming-gallery > header span {
  color: #75645b;
}

.demo-hub-page .grooming-gallery > div {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.demo-hub-page .grooming-gallery figure {
  position: relative;
  width: calc(25% - 0.75rem);
  min-height: 28rem;
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
}

.demo-hub-page .grooming-gallery figcaption {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  padding: 0.65rem;
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.9);
  font-size: 0.5rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.demo-hub-page .grooming-gallery__large,
.demo-hub-page .grooming-gallery__wide {
  width: calc(50% - 0.5rem) !important;
}

.demo-hub-page .grooming-gallery__wide {
  min-height: 24rem !important;
}

.demo-hub-page .grooming-final {
  position: relative;
  min-height: 51rem;
  color: #fff;
}

.demo-hub-page .grooming-final > figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .grooming-final > figure::after {
  position: absolute;
  inset: 0;
  background: rgba(47, 33, 27, 0.52);
  content: "";
}

.demo-hub-page .grooming-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 51rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.25rem;
  text-align: center;
}

.demo-hub-page .grooming-final > div p {
  color: #dff16d;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-final > div h3 {
  margin: 1rem 0 2rem;
  font-size: clamp(5rem, 8.5vw, 9rem);
  line-height: 0.83;
}

.demo-hub-page .grooming-final > div a {
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: #f54879;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .grooming-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #2f211b;
  color: #fff;
}

.demo-hub-page .grooming-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.demo-hub-page .grooming-footer > div:first-child {
  width: 35%;
  margin-right: auto;
}

.demo-hub-page .grooming-footer > div:first-child > p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.5;
}

.demo-hub-page .grooming-footer > div:not(:first-child) p {
  margin-bottom: 0.4rem;
  color: #dff16d;
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .grooming-footer > div:not(:first-child) a,
.demo-hub-page .grooming-footer > div:not(:first-child) span {
  color: rgba(255, 255, 255, 0.67);
  font-size: 0.72rem;
}

.demo-hub-page .grooming-brand--footer {
  color: #fff;
}

.demo-hub-page .demo-site--auto {
  background: #080a0e;
  color: #f4f2ed;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--auto h2,
.demo-hub-page .demo-site--auto h3,
.demo-hub-page .demo-site--auto h4,
.demo-hub-page .demo-site--auto p {
  margin-top: 0;
}

.demo-hub-page .demo-site--auto h2,
.demo-hub-page .demo-site--auto h3 {
  font-weight: 700;
  letter-spacing: -0.065em;
}

.demo-hub-page .demo-site--auto a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--auto button,
.demo-hub-page .demo-site--auto input,
.demo-hub-page .demo-site--auto select,
.demo-hub-page .demo-site--auto textarea {
  font: inherit;
}

.demo-hub-page .demo-site--auto img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .auto-site {
  position: relative;
  overflow: hidden;
  background: #080a0e;
}

.demo-hub-page .auto-nav {
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.75rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  background: #080a0e;
}

.demo-hub-page .auto-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.2vw, 2.5rem);
}

.demo-hub-page .auto-nav nav a,
.demo-hub-page .auto-nav .auto-call {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .auto-brand {
  display: flex;
  min-width: 13rem;
  align-items: center;
  gap: 0.7rem;
}

.demo-hub-page .auto-brand > span {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e44732;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
}

.demo-hub-page .auto-brand > div {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
}

.demo-hub-page .auto-brand strong {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.demo-hub-page .auto-brand small {
  color: #e44732;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.demo-hub-page .auto-book-link {
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  background: #e44732;
  color: #fff !important;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .auto-hero {
  position: relative;
  min-height: 61rem;
  overflow: hidden;
}

.demo-hub-page .auto-hero > figure,
.demo-hub-page .auto-hero .auto-hero__shade {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .auto-hero > figure img {
  -o-object-position: center 65%;
  object-position: center 65%;
}

.demo-hub-page .auto-hero .auto-hero__shade {
  background: linear-gradient(90deg, rgba(5, 7, 11, 0.96), rgba(5, 7, 11, 0.28) 75%);
}

.demo-hub-page .auto-hero > aside {
  position: absolute;
  z-index: 2;
  right: clamp(1.25rem, 4vw, 4.5rem);
  bottom: clamp(1.25rem, 4vw, 4rem);
  display: flex;
  width: min(32rem, 38%);
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.75rem;
  background: rgba(8, 10, 14, 0.8);
  backdrop-filter: blur(0.7rem);
}

.demo-hub-page .auto-hero > aside > span {
  color: #ff725f;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .auto-hero > aside > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.demo-hub-page .auto-hero > aside > div button {
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
}

.demo-hub-page .auto-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(78rem, 76%);
  min-height: 61rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 8vw, 9rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .auto-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #ff725f;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .auto-hero__copy h2 {
  max-width: 74rem;
  margin-bottom: 2rem;
  font-size: clamp(4.7rem, 8vw, 8.7rem);
  line-height: 0.84;
}

.demo-hub-page .auto-hero__copy h2 em {
  color: #ff725f;
  font-style: normal;
}

.demo-hub-page .auto-hero__copy > span {
  max-width: 43rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.6;
}

.demo-hub-page .auto-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .auto-hero__copy > div a {
  padding: 1rem 1.35rem;
  border: 1px solid #fff;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .auto-hero__copy > div a:first-child {
  border-color: #e44732;
  background: #e44732;
}

.demo-hub-page .auto-principles {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3.5rem);
  padding: 1rem clamp(1.25rem, 4vw, 4.5rem);
  background: #e44732;
}

.demo-hub-page .auto-principles span {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.demo-hub-page .auto-principles i {
  width: 0.32rem;
  height: 0.32rem;
  flex: 0 0 0.32rem;
  border-radius: 50%;
  background: #080a0e;
}

.demo-hub-page .auto-services,
.demo-hub-page .auto-reviews,
.demo-hub-page .auto-process {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .auto-services {
  background: #f5f5f2;
  color: #0e131c;
}

.demo-hub-page .auto-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .auto-heading > p {
  width: 8rem;
  flex: 0 0 8rem;
  color: #e44732;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .auto-heading h3 {
  width: min(62%, 62rem);
  margin-bottom: 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.86;
}

.demo-hub-page .auto-heading > span {
  width: min(20%, 22rem);
  color: #5f6875;
  line-height: 1.6;
}

.demo-hub-page .auto-service-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
}

.demo-hub-page .auto-service {
  display: flex;
  width: calc(25% - 0.75rem);
  min-height: 30rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(14, 19, 28, 0.16);
  border-radius: 0.75rem;
  background: #fff;
}

.demo-hub-page .auto-service figure {
  flex: 1;
  min-height: 20rem;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .auto-service > div {
  display: flex;
  min-height: 11rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem;
}

.demo-hub-page .auto-service span {
  color: #e44732;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .auto-service h4 {
  margin: 0.6rem 0 1rem;
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.demo-hub-page .auto-service button {
  padding: 0 0 0.25rem;
  margin-top: auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .auto-service--large,
.demo-hub-page .auto-service--wide {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .auto-service--wide {
  flex-direction: row;
}

.demo-hub-page .auto-service--wide figure,
.demo-hub-page .auto-service--wide > div {
  width: 50%;
}

.demo-hub-page .auto-service--wide figure {
  min-height: 30rem;
}

.demo-hub-page .auto-text-link {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 1rem;
  margin: 3rem auto 0;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .auto-text-link span {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e44732;
  color: #fff;
  font-size: 1.2rem;
}

.demo-hub-page .auto-difference {
  display: flex;
  min-height: 61rem;
  background: #11151c;
}

.demo-hub-page .auto-difference__visual {
  position: relative;
  display: flex;
  width: 52%;
  align-items: flex-end;
  padding: clamp(1rem, 3vw, 3rem);
}

.demo-hub-page .auto-difference__visual figure {
  width: 82%;
  height: 86%;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
}

.demo-hub-page .auto-difference__visual figure:last-child {
  position: absolute;
  top: 3rem;
  right: 2rem;
  width: 36%;
  height: 39%;
  border: 0.5rem solid #11151c;
}

.demo-hub-page .auto-difference__copy {
  display: flex;
  width: 48%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .auto-difference__copy > p {
  color: #ff725f;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .auto-difference__copy h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(3.8rem, 6.2vw, 6.7rem);
  line-height: 0.86;
}

.demo-hub-page .auto-difference__copy > span {
  color: rgba(255, 255, 255, 0.62);
}

.demo-hub-page .auto-difference__copy > div {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.demo-hub-page .auto-difference__copy article {
  display: flex;
  width: 50%;
  min-height: 11rem;
  flex-direction: column;
  padding: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.demo-hub-page .auto-difference__copy article:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.demo-hub-page .auto-difference__copy b {
  font-size: 1.1rem;
}

.demo-hub-page .auto-difference__copy small {
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

.demo-hub-page .auto-appointment {
  display: flex;
  min-height: 61rem;
  background: #e7e7e2;
  color: #0e131c;
}

.demo-hub-page .auto-appointment > div {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .auto-appointment > div > p {
  color: #e44732;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .auto-appointment > div h3 {
  margin: 1rem 0;
  font-size: clamp(4rem, 6.5vw, 7rem);
  line-height: 0.86;
}

.demo-hub-page .auto-appointment > div > span {
  max-width: 36rem;
  color: #5f6875;
  line-height: 1.6;
}

.demo-hub-page .auto-appointment > div figure {
  width: 78%;
  aspect-ratio: 1.55;
  margin: 2.5rem 0 0;
  overflow: hidden;
  border-radius: 0.75rem;
}

.demo-hub-page .auto-appointment > form {
  display: flex;
  width: 52%;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  padding: clamp(3rem, 6vw, 7rem);
  background: #f8f8f5;
}

.demo-hub-page .auto-appointment > form > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .auto-appointment > form > div label {
  width: 50%;
}

.demo-hub-page .auto-appointment > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .auto-appointment > form label > span {
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .auto-appointment > form input,
.demo-hub-page .auto-appointment > form select,
.demo-hub-page .auto-appointment > form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(14, 19, 28, 0.3);
  border-radius: 0;
  background: transparent;
  color: inherit;
  outline: 0;
  resize: vertical;
}

.demo-hub-page .auto-appointment > form input:focus,
.demo-hub-page .auto-appointment > form select:focus,
.demo-hub-page .auto-appointment > form textarea:focus {
  border-color: #e44732;
}

.demo-hub-page .auto-appointment > form > button {
  padding: 1rem;
  border: 0;
  border-radius: 999px;
  background: #e44732;
  color: #fff;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .auto-appointment > form > aside {
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  border-left: 0.35rem solid #e44732;
  background: #fff0ec;
}

.demo-hub-page .auto-appointment > form > aside strong {
  color: #b72d1b;
}

.demo-hub-page .auto-appointment > form > aside span,
.demo-hub-page .auto-appointment > form > aside p {
  margin: 0.35rem 0 0;
  color: #665452;
  line-height: 1.45;
}

.demo-hub-page .auto-appointment > form > aside[hidden] {
  display: none;
}

.demo-hub-page .auto-reviews {
  background: #080a0e;
}

.demo-hub-page .auto-reviews > header {
  display: flex;
  max-width: 78rem;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 4rem;
  text-align: center;
}

.demo-hub-page .auto-reviews > header p {
  color: #ff725f;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .auto-reviews > header h3 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.86;
}

.demo-hub-page .auto-reviews > header span {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .auto-reviews > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .auto-reviews article,
.demo-hub-page .auto-reviews figure {
  width: 33.333%;
  min-height: 27rem;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
}

.demo-hub-page .auto-reviews article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #11151c;
}

.demo-hub-page .auto-reviews article > span {
  color: #ff725f;
  letter-spacing: 0.2em;
}

.demo-hub-page .auto-reviews article p {
  margin: 1.5rem 0;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.demo-hub-page .auto-reviews article small {
  color: rgba(255, 255, 255, 0.55);
}

.demo-hub-page .auto-process {
  display: flex;
  gap: clamp(4rem, 9vw, 10rem);
  background: #f5f5f2;
  color: #0e131c;
}

.demo-hub-page .auto-process > header {
  width: 35%;
  flex: 0 0 35%;
}

.demo-hub-page .auto-process > header p {
  color: #e44732;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .auto-process > header h3 {
  font-size: clamp(4rem, 6vw, 6.5rem);
  line-height: 0.86;
}

.demo-hub-page .auto-process > div {
  display: flex;
  width: 65%;
  flex-wrap: wrap;
  align-content: center;
}

.demo-hub-page .auto-process article {
  display: flex;
  width: 50%;
  min-height: 14rem;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  border-top: 1px solid rgba(14, 19, 28, 0.18);
}

.demo-hub-page .auto-process article:nth-child(odd) {
  border-right: 1px solid rgba(14, 19, 28, 0.18);
}

.demo-hub-page .auto-process b {
  color: #e44732;
  font-size: 1.7rem;
}

.demo-hub-page .auto-process span {
  margin-top: 0.45rem;
  color: #5f6875;
  line-height: 1.5;
}

.demo-hub-page .auto-final {
  position: relative;
  min-height: 51rem;
}

.demo-hub-page .auto-final > figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .auto-final > figure::after {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, 0.63);
  content: "";
}

.demo-hub-page .auto-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 51rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.25rem;
  text-align: center;
}

.demo-hub-page .auto-final > div p {
  color: #ff725f;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .auto-final > div h3 {
  max-width: 90rem;
  margin: 1rem 0 2rem;
  font-size: clamp(5rem, 8.5vw, 9rem);
  line-height: 0.83;
}

.demo-hub-page .auto-final > div a {
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: #e44732;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .auto-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #05070a;
}

.demo-hub-page .auto-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.demo-hub-page .auto-footer > div:first-child {
  width: 35%;
  margin-right: auto;
}

.demo-hub-page .auto-footer > div:first-child > p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.56);
  line-height: 1.5;
}

.demo-hub-page .auto-footer > div:not(:first-child) p {
  margin-bottom: 0.4rem;
  color: #ff725f;
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .auto-footer > div:not(:first-child) a,
.demo-hub-page .auto-footer > div:not(:first-child) span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.72rem;
}

.demo-hub-page .auto-brand--footer {
  color: #fff;
}

.demo-hub-page .demo-site--plumbing {
  background: #f4f5f1;
  color: #0d1726;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--plumbing h2,
.demo-hub-page .demo-site--plumbing h3,
.demo-hub-page .demo-site--plumbing h4,
.demo-hub-page .demo-site--plumbing p {
  margin-top: 0;
}

.demo-hub-page .demo-site--plumbing h2,
.demo-hub-page .demo-site--plumbing h3 {
  font-weight: 700;
  letter-spacing: -0.065em;
}

.demo-hub-page .demo-site--plumbing a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--plumbing button,
.demo-hub-page .demo-site--plumbing input,
.demo-hub-page .demo-site--plumbing select,
.demo-hub-page .demo-site--plumbing textarea {
  font: inherit;
}

.demo-hub-page .demo-site--plumbing img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .plumbing-site {
  position: relative;
  overflow: hidden;
  background: #f4f5f1;
}

.demo-hub-page .plumbing-nav {
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.75rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(13, 23, 38, 0.14);
  background: #fff;
}

.demo-hub-page .plumbing-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.2vw, 2.5rem);
}

.demo-hub-page .plumbing-nav nav a,
.demo-hub-page .plumbing-nav .plumbing-call {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-brand {
  display: flex;
  min-width: 13rem;
  align-items: center;
  gap: 0.7rem;
}

.demo-hub-page .plumbing-brand > span {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: #b8f132;
  color: #0d1726;
  font-weight: 900;
}

.demo-hub-page .plumbing-brand > div {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
}

.demo-hub-page .plumbing-brand strong {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.demo-hub-page .plumbing-brand small {
  color: #466179;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-request-link {
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  background: #1168ed;
  color: #fff !important;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-hero {
  position: relative;
  display: flex;
  min-height: 58rem;
  background: #e8edf1;
}

.demo-hub-page .plumbing-hero > aside {
  position: absolute;
  z-index: 2;
  right: clamp(1.25rem, 4vw, 4.5rem);
  bottom: clamp(1.25rem, 4vw, 4rem);
  display: flex;
  width: min(28rem, 36%);
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 0.8rem;
  background: #b8f132;
}

.demo-hub-page .plumbing-hero > aside span {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-hero > aside strong {
  margin-top: 0.35rem;
  font-size: 1.45rem;
}

.demo-hub-page .plumbing-hero > aside a {
  width: -moz-max-content;
  width: max-content;
  margin-top: 1rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-hero__copy {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 7vw, 8rem) clamp(2rem, 6vw, 7rem);
}

.demo-hub-page .plumbing-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #1168ed;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-hero__copy h2 {
  max-width: 62rem;
  margin-bottom: 2rem;
  font-size: clamp(4.5rem, 7.6vw, 8.3rem);
  line-height: 0.84;
}

.demo-hub-page .plumbing-hero__copy h2 em {
  color: #1168ed;
  font-style: normal;
}

.demo-hub-page .plumbing-hero__copy > span {
  max-width: 37rem;
  color: #466179;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.6;
}

.demo-hub-page .plumbing-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .plumbing-hero__copy > div a {
  padding: 1rem 1.3rem;
  border: 1px solid #0d1726;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-hero__copy > div a:first-child {
  border-color: #1168ed;
  background: #1168ed;
  color: #fff;
}

.demo-hub-page .plumbing-hero__copy > small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 2rem;
  color: #466179;
  font-size: 0.6rem;
}

.demo-hub-page .plumbing-hero__copy > small i {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #1168ed;
}

.demo-hub-page .plumbing-hero__images {
  position: relative;
  display: flex;
  width: 48%;
  align-items: flex-end;
  padding: clamp(1rem, 3vw, 3rem);
  background: #0d1726;
}

.demo-hub-page .plumbing-hero__images figure {
  width: 82%;
  height: calc(100% - 7rem);
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
}

.demo-hub-page .plumbing-hero__images figure:last-child {
  position: absolute;
  top: 3rem;
  right: 2rem;
  width: 33%;
  height: 36%;
  border: 0.5rem solid #0d1726;
}

.demo-hub-page .plumbing-trust {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3.5rem);
  padding: 1rem clamp(1.25rem, 4vw, 4.5rem);
  background: #1168ed;
  color: #fff;
}

.demo-hub-page .plumbing-trust span {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-trust i {
  width: 0.32rem;
  height: 0.32rem;
  flex: 0 0 0.32rem;
  border-radius: 50%;
  background: #b8f132;
}

.demo-hub-page .plumbing-services,
.demo-hub-page .plumbing-reviews {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .plumbing-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .plumbing-heading > p {
  width: 8rem;
  flex: 0 0 8rem;
  color: #1168ed;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-heading h3 {
  width: min(62%, 62rem);
  margin-bottom: 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.86;
}

.demo-hub-page .plumbing-heading > span {
  width: min(20%, 22rem);
  color: #466179;
  line-height: 1.6;
}

.demo-hub-page .plumbing-service-list {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .plumbing-service-list article {
  display: flex;
  width: 25%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(13, 23, 38, 0.16);
  border-radius: 0.8rem;
  background: #fff;
}

.demo-hub-page .plumbing-service-list figure {
  aspect-ratio: 0.9;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .plumbing-service-list article > div {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.4rem;
}

.demo-hub-page .plumbing-service-list span {
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  background: #b8f132;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-service-list h4 {
  margin: 0.9rem 0 0.6rem;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  line-height: 0.95;
}

.demo-hub-page .plumbing-service-list p {
  color: #466179;
  line-height: 1.5;
}

.demo-hub-page .plumbing-service-list button {
  padding: 0 0 0.25rem;
  margin-top: auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-emergency {
  position: relative;
  display: flex;
  min-height: 52rem;
  background: #0d1726;
  color: #fff;
}

.demo-hub-page .plumbing-emergency > div {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .plumbing-emergency > div > p {
  color: #b8f132;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-emergency > div h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.86;
}

.demo-hub-page .plumbing-emergency > div > span {
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  line-height: 1.6;
}

.demo-hub-page .plumbing-emergency > div > a {
  margin-top: 2rem;
  padding: 1rem 1.3rem;
  border-radius: 999px;
  background: #b8f132;
  color: #0d1726;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-emergency > figure {
  width: 48%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .plumbing-emergency > aside {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  width: min(30rem, 40%);
  flex-direction: column;
  padding: 1.5rem;
  border-left: 0.4rem solid #1168ed;
  background: #fff;
  color: #0d1726;
}

.demo-hub-page .plumbing-emergency > aside span {
  color: #1168ed;
  font-size: 0.53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-emergency > aside strong {
  margin-top: 0.35rem;
  font-size: 1.35rem;
}

.demo-hub-page .plumbing-emergency > aside a {
  width: -moz-max-content;
  width: max-content;
  margin-top: 1rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-request {
  display: flex;
  min-height: 61rem;
  background: #e8edf1;
}

.demo-hub-page .plumbing-request__intro {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .plumbing-request__intro > p {
  color: #1168ed;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-request__intro h3 {
  margin: 1rem 0;
  font-size: clamp(4rem, 6.5vw, 7rem);
  line-height: 0.86;
}

.demo-hub-page .plumbing-request__intro > span {
  color: #466179;
  font-size: 1.1rem;
}

.demo-hub-page .plumbing-request__intro figure {
  width: 78%;
  aspect-ratio: 1.5;
  margin: 2.5rem 0 0;
  overflow: hidden;
  border-radius: 6rem 0.75rem 0.75rem 0.75rem;
}

.demo-hub-page .plumbing-request > form {
  display: flex;
  width: 52%;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  padding: clamp(3rem, 6vw, 7rem);
  background: #fff;
}

.demo-hub-page .plumbing-request > form > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .plumbing-request > form > div label {
  width: 50%;
}

.demo-hub-page .plumbing-request > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .plumbing-request > form label > span {
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-request > form input,
.demo-hub-page .plumbing-request > form select,
.demo-hub-page .plumbing-request > form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(13, 23, 38, 0.3);
  border-radius: 0;
  background: transparent;
  color: inherit;
  outline: 0;
  resize: vertical;
}

.demo-hub-page .plumbing-request > form input:focus,
.demo-hub-page .plumbing-request > form select:focus,
.demo-hub-page .plumbing-request > form textarea:focus {
  border-color: #1168ed;
}

.demo-hub-page .plumbing-request > form > button {
  padding: 1rem;
  border: 0;
  border-radius: 999px;
  background: #1168ed;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-request > form > small {
  color: #346339;
  line-height: 1.45;
}

.demo-hub-page .plumbing-request > form > aside {
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  border-left: 0.35rem solid #df3e36;
  background: #fff0ed;
}

.demo-hub-page .plumbing-request > form > aside strong {
  color: #a8231d;
}

.demo-hub-page .plumbing-request > form > aside span {
  margin-top: 0.3rem;
  color: #704a48;
  line-height: 1.45;
}

.demo-hub-page .plumbing-request > form > aside a {
  width: -moz-max-content;
  width: max-content;
  margin-top: 0.8rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-request > form > aside[hidden] {
  display: none;
}

.demo-hub-page .plumbing-pricing {
  display: flex;
  min-height: 51rem;
  background: #b8f132;
}

.demo-hub-page .plumbing-pricing > figure {
  width: 52%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .plumbing-pricing > div {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .plumbing-pricing > div > p {
  color: #1168ed;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-pricing > div h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(4rem, 6.5vw, 7rem);
  line-height: 0.86;
}

.demo-hub-page .plumbing-pricing > div > span {
  max-width: 37rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.demo-hub-page .plumbing-pricing > div a {
  margin-top: 2rem;
  padding: 1rem 1.3rem;
  border-radius: 999px;
  background: #0d1726;
  color: #fff;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-reviews {
  background: #f4f5f1;
}

.demo-hub-page .plumbing-reviews > header {
  display: flex;
  max-width: 72rem;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 4rem;
  text-align: center;
}

.demo-hub-page .plumbing-reviews > header p {
  color: #1168ed;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-reviews > header h3 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.86;
}

.demo-hub-page .plumbing-reviews > header span {
  color: #466179;
}

.demo-hub-page .plumbing-reviews > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .plumbing-reviews article,
.demo-hub-page .plumbing-reviews figure {
  width: 33.333%;
  min-height: 26rem;
  margin: 0;
  overflow: hidden;
  border-radius: 0.8rem;
}

.demo-hub-page .plumbing-reviews article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: #fff;
}

.demo-hub-page .plumbing-reviews article > span {
  color: #1168ed;
  letter-spacing: 0.2em;
}

.demo-hub-page .plumbing-reviews article p {
  margin: 1.5rem 0;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.demo-hub-page .plumbing-reviews article small {
  color: #466179;
}

.demo-hub-page .plumbing-area {
  display: flex;
  min-height: 48rem;
  background: #0d1726;
  color: #fff;
}

.demo-hub-page .plumbing-area > div {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .plumbing-area > div > p {
  color: #b8f132;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-area > div h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(4rem, 6.2vw, 6.8rem);
  line-height: 0.86;
}

.demo-hub-page .plumbing-area > div > span {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.67);
  line-height: 1.6;
}

.demo-hub-page .plumbing-area > figure {
  width: 50%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .plumbing-area form {
  display: flex;
  width: min(100%, 35rem);
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .plumbing-area form input {
  min-width: 0;
  flex: 1;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 999px;
}

.demo-hub-page .plumbing-area form button {
  padding: 0.9rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: #b8f132;
  color: #0d1726;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-area form small {
  width: 100%;
  min-height: 1.2rem;
  color: #cce986;
}

.demo-hub-page .plumbing-final {
  position: relative;
  min-height: 50rem;
  color: #fff;
}

.demo-hub-page .plumbing-final > figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .plumbing-final > figure::after {
  position: absolute;
  inset: 0;
  background: rgba(13, 23, 38, 0.62);
  content: "";
}

.demo-hub-page .plumbing-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 50rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.25rem;
  text-align: center;
}

.demo-hub-page .plumbing-final > div p {
  color: #b8f132;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-final > div h3 {
  margin: 1rem 0;
  font-size: clamp(5rem, 8.5vw, 9rem);
  line-height: 0.84;
}

.demo-hub-page .plumbing-final > div > span {
  font-size: 1.15rem;
}

.demo-hub-page .plumbing-final > div a {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: #b8f132;
  color: #0d1726;
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #070d16;
  color: #fff;
}

.demo-hub-page .plumbing-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.demo-hub-page .plumbing-footer > div:first-child {
  width: 35%;
  margin-right: auto;
}

.demo-hub-page .plumbing-footer > div:first-child > p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.5;
}

.demo-hub-page .plumbing-footer > div:not(:first-child) p {
  margin-bottom: 0.4rem;
  color: #b8f132;
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .plumbing-footer > div:not(:first-child) a,
.demo-hub-page .plumbing-footer > div:not(:first-child) span {
  color: rgba(255, 255, 255, 0.67);
  font-size: 0.72rem;
}

.demo-hub-page .plumbing-brand--footer {
  color: #fff;
}

.demo-hub-page .demo-site--landscaping {
  background: #f2f2e8;
  color: #0b3327;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--landscaping h2,
.demo-hub-page .demo-site--landscaping h3,
.demo-hub-page .demo-site--landscaping h4 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.demo-hub-page .demo-site--landscaping a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--landscaping button,
.demo-hub-page .demo-site--landscaping input,
.demo-hub-page .demo-site--landscaping select {
  font: inherit;
}

.demo-hub-page .demo-site--landscaping img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .landscape-site {
  position: relative;
  overflow: hidden;
  background: #f2f2e8;
}

.demo-hub-page .landscape-nav {
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.75rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  background: #f8f8f1;
  border-bottom: 1px solid rgba(11, 51, 39, 0.15);
}

.demo-hub-page .landscape-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.2vw, 2.5rem);
}

.demo-hub-page .landscape-nav nav a,
.demo-hub-page .landscape-nav .landscape-call {
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-brand {
  display: flex;
  min-width: 13rem;
  align-items: center;
  gap: 0.7rem;
}

.demo-hub-page .landscape-brand > span {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem 0.75rem 0.1rem 0.75rem;
  background: #58a43f;
  color: #fff;
  font-weight: 800;
}

.demo-hub-page .landscape-brand > div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .landscape-brand strong {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.demo-hub-page .landscape-brand small {
  color: #668075;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-quote-link {
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  background: #58a43f;
  color: #fff !important;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-hero {
  position: relative;
  min-height: 61rem;
  overflow: hidden;
  color: #fff;
}

.demo-hub-page .landscape-hero > figure,
.demo-hub-page .landscape-hero .landscape-hero__shade {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .landscape-hero .landscape-hero__shade {
  background: linear-gradient(90deg, rgba(5, 30, 20, 0.9), rgba(5, 30, 20, 0.18) 72%);
}

.demo-hub-page .landscape-hero > aside {
  position: absolute;
  right: clamp(1.25rem, 4vw, 4.5rem);
  bottom: clamp(1.25rem, 4vw, 4rem);
  display: flex;
  width: min(27rem, 34%);
  flex-direction: column;
  padding: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 1rem;
  background: rgba(11, 51, 39, 0.78);
  backdrop-filter: blur(0.7rem);
}

.demo-hub-page .landscape-hero > aside span {
  color: #b9e093;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-hero > aside strong {
  margin-top: 0.45rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.05;
}

.demo-hub-page .landscape-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(76rem, 72%);
  min-height: 61rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 8vw, 9rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .landscape-hero__copy > p {
  margin: 0 0 1.5rem;
  color: #b9e093;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-hero__copy h2 {
  max-width: 70rem;
  margin: 0 0 2rem;
  font-size: clamp(5rem, 8.2vw, 9rem);
  line-height: 0.83;
}

.demo-hub-page .landscape-hero__copy h2 em {
  color: #b9e093;
  font-weight: 400;
}

.demo-hub-page .landscape-hero__copy > span {
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.6;
}

.demo-hub-page .landscape-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .landscape-hero__copy > div a {
  padding: 1rem 1.35rem;
  border: 1px solid #fff;
  border-radius: 999px;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-hero__copy > div a:first-child {
  border-color: #58a43f;
  background: #58a43f;
}

.demo-hub-page .landscape-intro {
  display: flex;
  min-height: 48rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
  text-align: center;
}

.demo-hub-page .landscape-intro > span {
  color: #58a43f;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-intro h3 {
  max-width: 80rem;
  margin: 1.5rem 0 4rem;
  font-size: clamp(3.5rem, 6.2vw, 6.7rem);
  line-height: 0.94;
}

.demo-hub-page .landscape-intro > div {
  display: flex;
  width: min(72rem, 100%);
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4rem);
}

.demo-hub-page .landscape-intro figure {
  width: 22%;
  aspect-ratio: 0.82;
  margin: 0;
  overflow: hidden;
  border-radius: 5rem 5rem 0.4rem 0.4rem;
}

.demo-hub-page .landscape-intro figure:nth-child(2) {
  width: 32%;
  transform: translateY(2rem);
}

.demo-hub-page .landscape-services,
.demo-hub-page .landscape-work {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .landscape-services {
  background: #0b3327;
  color: #fff;
}

.demo-hub-page .landscape-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .landscape-heading > p {
  width: 8rem;
  flex: 0 0 8rem;
  margin: 0;
  color: #9ed578;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-heading h3 {
  width: min(62%, 62rem);
  margin: 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.88;
}

.demo-hub-page .landscape-heading > span {
  width: min(20%, 22rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.demo-hub-page .landscape-service-list {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .landscape-service-list article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1rem;
}

.demo-hub-page .landscape-service-list figure {
  aspect-ratio: 0.88;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .landscape-service-list article > div {
  display: flex;
  min-height: 17rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
}

.demo-hub-page .landscape-service-list span {
  color: #9ed578;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-service-list h4 {
  margin: 0.75rem 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 0.95;
}

.demo-hub-page .landscape-service-list p {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
}

.demo-hub-page .landscape-service-list button {
  padding: 0 0 0.25rem;
  margin-top: auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .landscape-work {
  background: #e2e8d5;
}

.demo-hub-page .landscape-work > header {
  display: flex;
  max-width: 75rem;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 4rem;
  text-align: center;
}

.demo-hub-page .landscape-work > header p {
  color: #58a43f;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-work > header h3 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.88;
}

.demo-hub-page .landscape-work > header span {
  color: #668075;
}

.demo-hub-page .landscape-work > small {
  display: block;
  margin-top: 1rem;
  color: #668075;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-comparison {
  position: relative;
  height: min(68vw, 48rem);
  min-height: 31rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #0b3327;
}

.demo-hub-page .landscape-comparison figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .landscape-comparison figcaption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  background: rgba(11, 51, 39, 0.86);
  color: #fff;
  font-size: 0.57rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .landscape-comparison input {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}

.demo-hub-page .landscape-comparison > i {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
}

.demo-hub-page .landscape-comparison > i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 3.7rem;
  height: 3.7rem;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #58a43f;
  color: #fff;
  content: "< >";
  font-style: normal;
  font-weight: 700;
  transform: translate(-50%, -50%);
}

.demo-hub-page .landscape-comparison__after {
  z-index: 1;
}

.demo-hub-page .landscape-comparison__after figcaption {
  right: 1.5rem;
  left: auto;
  background: #58a43f;
}

.demo-hub-page .landscape-project-strip {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
}

.demo-hub-page .landscape-project-strip figure {
  position: relative;
  width: 25%;
  aspect-ratio: 1.2;
  margin: 0;
  overflow: hidden;
  border-radius: 0.75rem;
}

.demo-hub-page .landscape-project-strip figcaption {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  text-shadow: 0 1px 8px #000;
  text-transform: uppercase;
}

.demo-hub-page .landscape-why {
  display: flex;
  min-height: 58rem;
  background: #f8f8f1;
}

.demo-hub-page .landscape-why > div:first-child {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .landscape-why > div:first-child > p {
  color: #58a43f;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-why > div:first-child h3 {
  margin: 1rem 0 2rem;
  font-size: clamp(4rem, 6.4vw, 7rem);
  line-height: 0.86;
}

.demo-hub-page .landscape-why > div:first-child figure {
  width: 70%;
  aspect-ratio: 1.45;
  margin: 0;
  overflow: hidden;
  border-radius: 6rem 6rem 0.5rem 0.5rem;
}

.demo-hub-page .landscape-promises {
  display: flex;
  width: 48%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
  background: #b9d994;
}

.demo-hub-page .landscape-promises article {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(11, 51, 39, 0.25);
}

.demo-hub-page .landscape-promises b {
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 400;
}

.demo-hub-page .landscape-promises span {
  margin-top: 0.35rem;
  color: #49645a;
}

.demo-hub-page .landscape-quote {
  display: flex;
  min-height: 60rem;
  background: #0b3327;
  color: #fff;
}

.demo-hub-page .landscape-quote__visual {
  position: relative;
  width: 52%;
}

.demo-hub-page .landscape-quote__visual figure {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .landscape-quote__visual > div {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: rgba(248, 248, 241, 0.94);
  color: #0b3327;
}

.demo-hub-page .landscape-quote__visual > div span {
  color: #58a43f;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .landscape-quote__visual > div strong {
  margin-top: 0.4rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
}

.demo-hub-page .landscape-quote > form {
  display: flex;
  width: 48%;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .landscape-quote > form header p {
  color: #9ed578;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-quote > form header h3 {
  margin: 0.8rem 0;
  font-size: clamp(4rem, 6vw, 6.8rem);
  line-height: 0.86;
}

.demo-hub-page .landscape-quote > form header span {
  color: rgba(255, 255, 255, 0.65);
}

.demo-hub-page .landscape-quote > form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.demo-hub-page .landscape-quote > form label > span {
  color: #9ed578;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-quote > form input,
.demo-hub-page .landscape-quote > form select {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  background: transparent;
  color: #fff;
  outline: 0;
}

.demo-hub-page .landscape-quote > form select option {
  color: #0b3327;
}

.demo-hub-page .landscape-quote > form > button {
  padding: 1rem;
  border: 0;
  border-radius: 999px;
  background: #58a43f;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .landscape-quote > form > small {
  color: #b9e093;
  line-height: 1.45;
}

.demo-hub-page .landscape-file {
  position: relative;
  cursor: pointer;
}

.demo-hub-page .landscape-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.demo-hub-page .landscape-file b {
  padding: 0.9rem;
  border: 1px dashed rgba(255, 255, 255, 0.42);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
}

.demo-hub-page .landscape-area {
  display: flex;
  min-height: 48rem;
  background: #e2e8d5;
}

.demo-hub-page .landscape-area > div {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .landscape-area > div > p {
  color: #58a43f;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-area > div h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(4rem, 6vw, 6.8rem);
  line-height: 0.86;
}

.demo-hub-page .landscape-area > div > span {
  max-width: 33rem;
  color: #668075;
  line-height: 1.6;
}

.demo-hub-page .landscape-area > figure {
  width: 50%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .landscape-area form {
  display: flex;
  width: min(100%, 35rem);
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .landscape-area form input {
  min-width: 0;
  flex: 1;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
}

.demo-hub-page .landscape-area form button {
  padding: 0.9rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: #0b3327;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .landscape-area form small {
  width: 100%;
  min-height: 1.2rem;
  color: #335b49;
}

.demo-hub-page .landscape-final {
  position: relative;
  min-height: 51rem;
  color: #fff;
}

.demo-hub-page .landscape-final > figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .landscape-final > figure::after {
  position: absolute;
  inset: 0;
  background: rgba(7, 36, 25, 0.55);
  content: "";
}

.demo-hub-page .landscape-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 51rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.25rem;
  text-align: center;
}

.demo-hub-page .landscape-final > div p {
  color: #b9e093;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-final > div h3 {
  max-width: 90rem;
  margin: 1rem 0 2rem;
  font-size: clamp(5rem, 8.5vw, 9rem);
  line-height: 0.83;
}

.demo-hub-page .landscape-final > div a {
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: #58a43f;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .landscape-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #061f17;
  color: #fff;
}

.demo-hub-page .landscape-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.demo-hub-page .landscape-footer > div:first-child {
  width: 35%;
  margin-right: auto;
}

.demo-hub-page .landscape-footer > div:first-child > p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.demo-hub-page .landscape-footer > div:not(:first-child) p {
  margin-bottom: 0.4rem;
  color: #9ed578;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .landscape-footer > div:not(:first-child) a,
.demo-hub-page .landscape-footer > div:not(:first-child) span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
}

.demo-hub-page .landscape-brand--footer {
  color: #fff;
}

.demo-hub-page .demo-site--cleaning {
  background: #f7f1ea;
  color: #17251c;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--cleaning h2,
.demo-hub-page .demo-site--cleaning h3,
.demo-hub-page .demo-site--cleaning h4 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--cleaning a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--cleaning button,
.demo-hub-page .demo-site--cleaning input,
.demo-hub-page .demo-site--cleaning select {
  font: inherit;
}

.demo-hub-page .demo-site--cleaning img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .cleaning-site {
  position: relative;
  overflow: hidden;
  background: #f7f1ea;
}

.demo-hub-page .cleaning-nav {
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(23, 37, 28, 0.15);
  background: #f7f1ea;
}

.demo-hub-page .cleaning-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.5vw, 2.8rem);
}

.demo-hub-page .cleaning-nav nav a {
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-brand {
  display: flex;
  min-width: 13rem;
  flex-direction: column;
  line-height: 0.85;
}

.demo-hub-page .cleaning-brand span {
  color: #7ba443;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
}

.demo-hub-page .cleaning-brand strong {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-nav__quote {
  padding: 0.9rem 1.2rem;
  border-radius: 999px;
  background: #17251c;
  color: #fff !important;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-hero {
  position: relative;
  display: flex;
  min-height: 57rem;
  background: #e4edcf;
}

.demo-hub-page .cleaning-hero > figure {
  width: 52%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .cleaning-hero > aside {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  display: flex;
  width: min(25rem, 36%);
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1rem;
  background: rgba(247, 241, 234, 0.94);
}

.demo-hub-page .cleaning-hero > aside span {
  color: #7ba443;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-hero > aside strong {
  margin-top: 0.45rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 400;
}

.demo-hub-page .cleaning-hero__copy {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 7vw, 8rem) clamp(2rem, 6vw, 7rem);
}

.demo-hub-page .cleaning-hero__copy > p {
  margin: 0 0 1.5rem;
  color: #648934;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-hero__copy h2 {
  margin: 0 0 2rem;
  font-size: clamp(5rem, 8vw, 9rem);
  line-height: 0.82;
}

.demo-hub-page .cleaning-hero__copy > span {
  max-width: 40rem;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.6;
}

.demo-hub-page .cleaning-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .cleaning-hero__copy > div a {
  padding: 1rem 1.3rem;
  border: 1px solid #17251c;
  border-radius: 999px;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-hero__copy > div a:first-child {
  background: #17251c;
  color: #fff;
}

.demo-hub-page .cleaning-trust {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3.5vw, 3.5rem);
  padding: 1rem clamp(1.25rem, 4vw, 4.5rem);
  background: #7ba443;
  color: #fff;
}

.demo-hub-page .cleaning-trust span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-trust i {
  width: 0.32rem;
  height: 0.32rem;
  flex: 0 0 0.32rem;
  border-radius: 50%;
  background: #f7d8c7;
}

.demo-hub-page .cleaning-services,
.demo-hub-page .cleaning-included,
.demo-hub-page .cleaning-reviews {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .cleaning-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .cleaning-heading > p {
  width: 8rem;
  flex: 0 0 8rem;
  margin: 0;
  color: #648934;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-heading h3 {
  width: min(62%, 60rem);
  margin: 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.88;
}

.demo-hub-page .cleaning-heading > span {
  width: min(20%, 22rem);
  color: #59675e;
  line-height: 1.6;
}

.demo-hub-page .cleaning-service-list {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .cleaning-service-list article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: #ecd2c2;
}

.demo-hub-page .cleaning-service-list article:nth-child(2) {
  background: #d9e7c0;
}

.demo-hub-page .cleaning-service-list article:nth-child(3) {
  background: #d6e4de;
}

.demo-hub-page .cleaning-service-list figure {
  order: 2;
  aspect-ratio: 1.1;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .cleaning-service-list article > div {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem;
}

.demo-hub-page .cleaning-service-list span {
  color: #648934;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-service-list h4 {
  margin: 0.75rem 0;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 0.95;
}

.demo-hub-page .cleaning-service-list p {
  line-height: 1.55;
}

.demo-hub-page .cleaning-service-list button {
  padding: 0 0 0.25rem;
  margin-top: auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-quote {
  display: flex;
  min-height: 58rem;
  background: #17251c;
  color: #fff;
}

.demo-hub-page .cleaning-quote__intro {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .cleaning-quote__intro > p {
  color: #a8cb72;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-quote__intro h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(4rem, 6.4vw, 7rem);
  line-height: 0.86;
}

.demo-hub-page .cleaning-quote__intro > span {
  max-width: 35rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.demo-hub-page .cleaning-quote__intro figure {
  width: 78%;
  aspect-ratio: 1.5;
  margin: 2.5rem 0 0;
  overflow: hidden;
  border-radius: 8rem 8rem 1rem 1rem;
}

.demo-hub-page .cleaning-quote > form {
  display: flex;
  width: 52%;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(3rem, 6vw, 7rem);
  background: #f7f1ea;
  color: #17251c;
}

.demo-hub-page .cleaning-quote > form > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .cleaning-quote > form > div label {
  width: 50%;
}

.demo-hub-page .cleaning-quote > form label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .cleaning-quote > form label > span {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-quote > form input,
.demo-hub-page .cleaning-quote > form select {
  width: 100%;
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px solid rgba(23, 37, 28, 0.32);
  border-radius: 0;
  background: transparent;
  color: inherit;
  outline: 0;
}

.demo-hub-page .cleaning-quote > form input:focus,
.demo-hub-page .cleaning-quote > form select:focus {
  border-color: #7ba443;
}

.demo-hub-page .cleaning-quote > form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid rgba(23, 37, 28, 0.18);
  border-radius: 0.75rem;
}

.demo-hub-page .cleaning-quote > form fieldset legend {
  padding: 0 0.5rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-quote > form fieldset label {
  width: calc(50% - 0.4rem);
  flex-direction: row;
  align-items: center;
  font-size: 0.72rem;
}

.demo-hub-page .cleaning-quote > form > button {
  padding: 1rem;
  border: 0;
  border-radius: 999px;
  background: #7ba443;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-quote > form > aside {
  padding: 1.25rem;
  border-left: 0.3rem solid #7ba443;
  background: #e4edcf;
}

.demo-hub-page .cleaning-quote > form > aside span {
  color: #648934;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-quote > form > aside strong,
.demo-hub-page .cleaning-quote > form > aside p {
  display: block;
  margin-top: 0.5rem;
}

.demo-hub-page .cleaning-quote > form > aside p {
  margin-bottom: 0;
  color: #59675e;
  line-height: 1.45;
}

.demo-hub-page .cleaning-included {
  background: #fff;
}

.demo-hub-page .cleaning-included__content {
  display: flex;
  min-height: 49rem;
}

.demo-hub-page .cleaning-included__content > figure {
  width: 45%;
  margin: 0;
  overflow: hidden;
  border-radius: 10rem 10rem 0 0;
}

.demo-hub-page .cleaning-checklist {
  display: flex;
  width: 55%;
  flex-wrap: wrap;
  align-content: stretch;
  padding-left: clamp(1rem, 4vw, 4rem);
}

.demo-hub-page .cleaning-checklist article {
  display: flex;
  width: 50%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 2.5rem);
  border-top: 1px solid rgba(23, 37, 28, 0.17);
}

.demo-hub-page .cleaning-checklist article:nth-child(odd) {
  border-right: 1px solid rgba(23, 37, 28, 0.17);
}

.demo-hub-page .cleaning-checklist article > span {
  color: #7ba443;
  font-size: 0.55rem;
  font-weight: 700;
}

.demo-hub-page .cleaning-checklist strong {
  margin: 0.65rem 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 400;
}

.demo-hub-page .cleaning-checklist small {
  color: #59675e;
  line-height: 1.5;
}

.demo-hub-page .cleaning-checklist__accent {
  background: #e4edcf;
}

.demo-hub-page .cleaning-text-link {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 1rem;
  margin: 3rem auto 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-text-link span {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #7ba443;
  color: #fff;
  font-size: 1.2rem;
}

.demo-hub-page .cleaning-process {
  display: flex;
  min-height: 58rem;
  background: #ecd2c2;
}

.demo-hub-page .cleaning-process__visual {
  position: relative;
  width: 55%;
}

.demo-hub-page .cleaning-process__visual figure {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .cleaning-process__visual > div {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: rgba(247, 241, 234, 0.94);
}

.demo-hub-page .cleaning-process__visual > div span {
  color: #648934;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-process__visual > div strong {
  margin-top: 0.4rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
}

.demo-hub-page .cleaning-process__steps {
  display: flex;
  width: 45%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .cleaning-process__steps > p {
  color: #648934;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-process__steps h3 {
  margin: 0.8rem 0 2.5rem;
  font-size: clamp(4rem, 6vw, 6.5rem);
  line-height: 0.86;
}

.demo-hub-page .cleaning-process__steps article {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(23, 37, 28, 0.2);
}

.demo-hub-page .cleaning-process__steps b {
  display: inline-flex;
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 2.3rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #7ba443;
  color: #fff;
}

.demo-hub-page .cleaning-process__steps article > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.demo-hub-page .cleaning-process__steps article strong {
  font-size: 1.05rem;
}

.demo-hub-page .cleaning-process__steps article span {
  color: #59675e;
  line-height: 1.45;
}

.demo-hub-page .cleaning-reviews {
  background: #e4edcf;
}

.demo-hub-page .cleaning-reviews > header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 65rem;
  margin: 0 auto clamp(3rem, 5vw, 5rem);
  text-align: center;
}

.demo-hub-page .cleaning-reviews > header p {
  color: #648934;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-reviews > header h3 {
  margin: 0.8rem 0 1.2rem;
  font-size: clamp(4rem, 7vw, 7rem);
  line-height: 0.88;
}

.demo-hub-page .cleaning-reviews > header > span {
  color: #59675e;
}

.demo-hub-page .cleaning-reviews > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .cleaning-reviews article,
.demo-hub-page .cleaning-reviews figure {
  width: 33.333%;
  min-height: 25rem;
  margin: 0;
  border-radius: 1rem;
  background: #f7f1ea;
}

.demo-hub-page .cleaning-reviews article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
}

.demo-hub-page .cleaning-reviews article > span {
  color: #7ba443;
  letter-spacing: 0.2em;
}

.demo-hub-page .cleaning-reviews article p {
  margin: 1.5rem 0;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.1;
}

.demo-hub-page .cleaning-reviews article small {
  color: #59675e;
}

.demo-hub-page .cleaning-reviews figure {
  overflow: hidden;
}

.demo-hub-page .cleaning-area {
  display: flex;
  min-height: 48rem;
  background: #17251c;
  color: #fff;
}

.demo-hub-page .cleaning-area > div {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .cleaning-area > div > p {
  color: #a8cb72;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-area > div h3 {
  margin: 1rem 0 1.5rem;
  font-size: clamp(4rem, 6vw, 6.7rem);
  line-height: 0.86;
}

.demo-hub-page .cleaning-area > div > span {
  max-width: 33rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.demo-hub-page .cleaning-area > figure {
  width: 50%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .cleaning-area form {
  display: flex;
  width: min(100%, 35rem);
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .cleaning-area form input {
  min-width: 0;
  flex: 1;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 999px;
}

.demo-hub-page .cleaning-area form button {
  padding: 0.9rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: #7ba443;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-area form small {
  width: 100%;
  min-height: 1.2rem;
  color: #c8e39f;
}

.demo-hub-page .cleaning-final {
  position: relative;
  min-height: 51rem;
  color: #fff;
}

.demo-hub-page .cleaning-final > figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .cleaning-final > figure::after {
  position: absolute;
  inset: 0;
  background: rgba(23, 37, 28, 0.52);
  content: "";
}

.demo-hub-page .cleaning-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 51rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.25rem;
  text-align: center;
}

.demo-hub-page .cleaning-final > div p {
  color: #d8efb6;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-final > div h3 {
  max-width: 90rem;
  margin: 1rem 0 2rem;
  font-size: clamp(5rem, 8.5vw, 9rem);
  line-height: 0.83;
}

.demo-hub-page .cleaning-final > div a {
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: #fff;
  color: #17251c;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #f7f1ea;
}

.demo-hub-page .cleaning-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.demo-hub-page .cleaning-footer > div:first-child {
  width: 35%;
  margin-right: auto;
}

.demo-hub-page .cleaning-footer > div:first-child > p {
  max-width: 27rem;
  color: #59675e;
  line-height: 1.5;
}

.demo-hub-page .cleaning-footer > div:not(:first-child) p {
  margin-bottom: 0.4rem;
  color: #648934;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .cleaning-footer > div:not(:first-child) a,
.demo-hub-page .cleaning-footer > div:not(:first-child) span {
  color: #59675e;
  font-size: 0.72rem;
}

.demo-hub-page .demo-site--contractor {
  background: #f5f0e8;
  color: #0b1a30;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--contractor h2,
.demo-hub-page .demo-site--contractor h3,
.demo-hub-page .demo-site--contractor h4,
.demo-hub-page .demo-site--contractor p {
  margin-top: 0;
}

.demo-hub-page .demo-site--contractor a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--contractor button,
.demo-hub-page .demo-site--contractor input,
.demo-hub-page .demo-site--contractor select,
.demo-hub-page .demo-site--contractor textarea {
  font: inherit;
}

.demo-hub-page .demo-site--contractor img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .contractor-site {
  position: relative;
  overflow: hidden;
  background: #f5f0e8;
}

.demo-hub-page .contractor-nav {
  display: flex;
  min-height: 6rem;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.75rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  background: #fff;
  border-bottom: 1px solid rgba(11, 26, 48, 0.14);
}

.demo-hub-page .contractor-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.2vw, 2.5rem);
}

.demo-hub-page .contractor-nav nav a,
.demo-hub-page .contractor-nav .contractor-call {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-brand {
  display: flex;
  min-width: 13rem;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.65rem;
  column-gap: 0.65rem;
}

.demo-hub-page .contractor-brand > span {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f45b1d;
  color: #fff;
  font-weight: 900;
}

.demo-hub-page .contractor-brand strong {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-brand small {
  width: 100%;
  padding-left: 3.15rem;
  margin-top: -0.55rem;
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-quote-link {
  padding: 1rem 1.3rem;
  border-radius: 0.25rem;
  background: #f45b1d;
  color: #fff !important;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-hero {
  position: relative;
  display: flex;
  min-height: 57rem;
  align-items: stretch;
  background: #0b1a30;
  color: #fff;
}

.demo-hub-page .contractor-hero > figure {
  width: 48%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .contractor-hero > figure img {
  -o-object-position: 58% center;
  object-position: 58% center;
}

.demo-hub-page .contractor-hero__copy {
  display: flex;
  width: 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 7vw, 8rem) clamp(3rem, 9vw, 10rem) clamp(4rem, 7vw, 8rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .contractor-hero__copy > p {
  margin-bottom: 1.5rem;
  color: #ff7a42;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-hero__copy h2 {
  max-width: 54rem;
  margin-bottom: 2rem;
  font-size: clamp(4.5rem, 7.8vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.84;
}

.demo-hub-page .contractor-hero__copy > span {
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  line-height: 1.55;
}

.demo-hub-page .contractor-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .contractor-hero__copy > div a {
  padding: 1rem 1.35rem;
  border: 1px solid #fff;
  border-radius: 0.25rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-hero__copy > div a:first-child {
  border-color: #f45b1d;
  background: #f45b1d;
}

.demo-hub-page .contractor-hero__copy > small {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
}

.demo-hub-page .contractor-hero__copy > small i {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #f45b1d;
}

.demo-hub-page .contractor-quick-form {
  position: absolute;
  z-index: 2;
  right: clamp(1.25rem, 4vw, 4.5rem);
  top: 50%;
  display: flex;
  width: min(28rem, 36%);
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2.75rem);
  border-top: 0.45rem solid #f45b1d;
  border-radius: 0.4rem;
  background: #fff;
  color: #0b1a30;
  transform: translateY(-50%);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
}

.demo-hub-page .contractor-quick-form header > span {
  color: #f45b1d;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-quick-form header h3 {
  margin: 0.45rem 0;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.demo-hub-page .contractor-quick-form header p {
  margin-bottom: 0;
  color: #637085;
  line-height: 1.5;
}

.demo-hub-page .contractor-quick-form > div {
  display: flex;
  gap: 0.75rem;
}

.demo-hub-page .contractor-quick-form > div label {
  width: 50%;
}

.demo-hub-page .contractor-quick-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.demo-hub-page .contractor-quick-form label > span {
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-quick-form input,
.demo-hub-page .contractor-quick-form select,
.demo-hub-page .contractor-quick-form textarea {
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(11, 26, 48, 0.28);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #0b1a30;
  resize: vertical;
}

.demo-hub-page .contractor-quick-form input:focus,
.demo-hub-page .contractor-quick-form select:focus,
.demo-hub-page .contractor-quick-form textarea:focus {
  border-color: #f45b1d;
}

.demo-hub-page .contractor-quick-form > button {
  padding: 1rem;
  border: 0;
  border-radius: 0.25rem;
  background: #f45b1d;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-quick-form > small {
  color: #315a3f;
  line-height: 1.4;
}

.demo-hub-page .contractor-file {
  position: relative;
  cursor: pointer;
}

.demo-hub-page .contractor-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.demo-hub-page .contractor-file b {
  padding: 0.75rem;
  border: 1px dashed rgba(11, 26, 48, 0.32);
  border-radius: 0.25rem;
  color: #637085;
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
}

.demo-hub-page .contractor-trust {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: 1rem clamp(1.25rem, 4vw, 4.5rem);
  background: #f45b1d;
  color: #fff;
}

.demo-hub-page .contractor-trust span {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.demo-hub-page .contractor-trust i {
  width: 0.35rem;
  height: 0.35rem;
  flex: 0 0 0.35rem;
  border-radius: 50%;
  background: #0b1a30;
}

.demo-hub-page .contractor-services,
.demo-hub-page .contractor-work,
.demo-hub-page .contractor-process {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .contractor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .contractor-heading > p {
  width: 8rem;
  flex: 0 0 8rem;
  color: #f45b1d;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-heading h3 {
  width: min(62%, 62rem);
  margin-bottom: 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.demo-hub-page .contractor-heading > span {
  width: min(20%, 22rem);
  color: #637085;
  line-height: 1.6;
}

.demo-hub-page .contractor-service-list {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .contractor-service-list article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
  border: 1px solid rgba(11, 26, 48, 0.15);
  background: #fff;
}

.demo-hub-page .contractor-service-list figure {
  aspect-ratio: 1.15;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .contractor-service-list article > div {
  display: flex;
  min-height: 17rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem;
}

.demo-hub-page .contractor-service-list span {
  color: #f45b1d;
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-service-list h4 {
  margin: 0.65rem 0;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.055em;
}

.demo-hub-page .contractor-service-list p {
  color: #637085;
  line-height: 1.55;
}

.demo-hub-page .contractor-service-list button {
  padding: 0 0 0.3rem;
  margin-top: auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .contractor-text-link {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 1rem;
  margin: 3rem auto 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-text-link span {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f45b1d;
  color: #fff;
  font-size: 1.2rem;
}

.demo-hub-page .contractor-work {
  background: #0b1a30;
  color: #fff;
}

.demo-hub-page .contractor-heading--light > span {
  color: rgba(255, 255, 255, 0.65);
}

.demo-hub-page .contractor-projects {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
}

.demo-hub-page .contractor-project {
  display: flex;
  width: calc(25% - 0.75rem);
  min-height: 27rem;
  flex-direction: column;
  background: #fff;
  color: #0b1a30;
}

.demo-hub-page .contractor-project figure {
  flex: 1;
  min-height: 20rem;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .contractor-project footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.demo-hub-page .contractor-project footer span {
  font-weight: 800;
}

.demo-hub-page .contractor-project footer small {
  color: #f45b1d;
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .contractor-project--large {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .contractor-project--wide {
  width: calc(50% - 0.5rem);
}

.demo-hub-page .contractor-project--wide figure {
  min-height: 24rem;
}

.demo-hub-page .contractor-text-link--light {
  color: #fff;
}

.demo-hub-page .contractor-process {
  display: flex;
  gap: clamp(4rem, 9vw, 10rem);
  background: #fff;
}

.demo-hub-page .contractor-process > header {
  width: 35%;
  flex: 0 0 35%;
}

.demo-hub-page .contractor-process > header p {
  color: #f45b1d;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-process > header h3 {
  font-size: clamp(4rem, 6vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.demo-hub-page .contractor-process > div {
  display: flex;
  width: 65%;
  flex-wrap: wrap;
  align-content: center;
}

.demo-hub-page .contractor-process article {
  display: flex;
  width: 50%;
  min-height: 15rem;
  flex-direction: column;
  padding: 1.5rem;
  border-top: 1px solid rgba(11, 26, 48, 0.18);
}

.demo-hub-page .contractor-process article:nth-child(odd) {
  border-right: 1px solid rgba(11, 26, 48, 0.18);
}

.demo-hub-page .contractor-process b {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f45b1d;
  color: #fff;
}

.demo-hub-page .contractor-process h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.25rem;
}

.demo-hub-page .contractor-process article p {
  margin-bottom: 0;
  color: #637085;
  line-height: 1.55;
}

.demo-hub-page .contractor-pricing {
  display: flex;
  min-height: 50rem;
  background: #f45b1d;
  color: #fff;
}

.demo-hub-page .contractor-pricing figure {
  width: 52%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .contractor-pricing > div {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .contractor-pricing > div > p {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-pricing h3 {
  margin-bottom: 2rem;
  font-size: clamp(3.7rem, 6vw, 6.7rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.demo-hub-page .contractor-pricing strong {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}

.demo-hub-page .contractor-pricing span {
  max-width: 32rem;
  margin-top: 0.8rem;
  line-height: 1.55;
}

.demo-hub-page .contractor-pricing a {
  margin-top: 2rem;
  padding: 1rem 1.4rem;
  border-radius: 0.25rem;
  background: #0b1a30;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-area {
  display: flex;
  min-height: 48rem;
  background: #f5f0e8;
}

.demo-hub-page .contractor-area > div {
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .contractor-area > div > p {
  color: #f45b1d;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-area h3 {
  margin-bottom: 1.5rem;
  font-size: clamp(4rem, 6vw, 6.8rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

.demo-hub-page .contractor-area > div > span {
  max-width: 31rem;
  color: #637085;
  font-size: 1.1rem;
  line-height: 1.6;
}

.demo-hub-page .contractor-area > figure {
  position: relative;
  width: 52%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .contractor-area figcaption {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-left: 0.35rem solid #f45b1d;
  background: #fff;
}

.demo-hub-page .contractor-area figcaption span {
  color: #f45b1d;
  font-size: 0.53rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .contractor-area figcaption strong {
  margin-top: 0.35rem;
  font-size: 1.35rem;
}

.demo-hub-page .contractor-area form {
  display: flex;
  width: min(100%, 34rem);
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.demo-hub-page .contractor-area form label {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.45rem;
}

.demo-hub-page .contractor-area form label span {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .contractor-area form input {
  flex: 1;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(11, 26, 48, 0.25);
  background: #fff;
}

.demo-hub-page .contractor-area form button {
  padding: 0.9rem 1.1rem;
  border: 0;
  border-radius: 0.2rem;
  background: #0b1a30;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-hub-page .contractor-area form small {
  width: 100%;
  min-height: 1.2rem;
  color: #315a3f;
  line-height: 1.4;
}

.demo-hub-page .contractor-final {
  position: relative;
  min-height: 48rem;
  color: #fff;
}

.demo-hub-page .contractor-final figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .contractor-final figure::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 26, 48, 0.94), rgba(11, 26, 48, 0.4));
  content: "";
}

.demo-hub-page .contractor-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(70rem, 76%);
  min-height: 48rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 7vw, 8rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .contractor-final > div p {
  color: #ff7a42;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-final h3 {
  margin-bottom: 1rem;
  font-size: clamp(4.2rem, 7.5vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.85;
}

.demo-hub-page .contractor-final > div > span {
  font-size: 1.2rem;
}

.demo-hub-page .contractor-final a {
  margin-top: 2rem;
  padding: 1rem 1.4rem;
  border-radius: 0.25rem;
  background: #f45b1d;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #07111f;
  color: #fff;
}

.demo-hub-page .contractor-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.demo-hub-page .contractor-footer > div:first-child {
  width: 35%;
  margin-right: auto;
}

.demo-hub-page .contractor-footer > div:first-child > p {
  max-width: 28rem;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.demo-hub-page .contractor-footer > div:not(:first-child) p {
  margin-bottom: 0.4rem;
  color: #ff7a42;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .contractor-footer > div:not(:first-child) a,
.demo-hub-page .contractor-footer > div:not(:first-child) span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
}

.demo-hub-page .contractor-brand--footer {
  color: #fff;
}

.demo-hub-page .demo-site--boutique {
  background: #ede9e1;
  color: #171714;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--boutique h2,
.demo-hub-page .demo-site--boutique h3 {
  font-family: "Italiana", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: none;
}

.demo-hub-page .demo-site--boutique a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--boutique button,
.demo-hub-page .demo-site--boutique input {
  font: inherit;
}

.demo-hub-page .demo-site--boutique img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .boutique-site {
  position: relative;
  overflow: hidden;
  background: #ede9e1;
}

.demo-hub-page .boutique-nav {
  display: flex;
  min-height: 5.5rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(23, 23, 20, 0.25);
}

.demo-hub-page .boutique-nav nav {
  display: flex;
  margin-left: auto;
  gap: clamp(1rem, 2.4vw, 2.6rem);
}

.demo-hub-page .boutique-nav nav a,
.demo-hub-page .boutique-nav > button {
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-nav > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.demo-hub-page .boutique-nav > button span {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.demo-hub-page .boutique-nav__brand {
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.5rem, 2.7vw, 2.6rem);
  text-transform: uppercase;
}

.demo-hub-page .boutique-nav__brand i {
  color: #a34f31;
  font-style: italic;
  text-transform: none;
}

.demo-hub-page .boutique-hero {
  display: flex;
  min-height: 57rem;
  background: #1c1b18;
  color: #f1eee7;
}

.demo-hub-page .boutique-hero > figure {
  width: 54%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .boutique-hero__copy {
  display: flex;
  width: 46%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .boutique-hero__copy > p {
  margin: 0;
  color: #c97b5d;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-hero__copy h2 {
  margin: 1.5rem 0;
  font-size: clamp(4.7rem, 7.8vw, 8.8rem);
  line-height: 0.82;
}

.demo-hub-page .boutique-hero__copy > span {
  max-width: 36rem;
  line-height: 1.65;
}

.demo-hub-page .boutique-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.demo-hub-page .boutique-hero__copy > div a {
  padding: 0.9rem 1.2rem;
  border: 1px solid #f1eee7;
  font-size: 0.57rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-hero__copy > div a:first-child {
  background: #f1eee7;
  color: #171714;
}

.demo-hub-page .boutique-new,
.demo-hub-page .boutique-shop {
  padding: clamp(5rem, 9vw, 10rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .boutique-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.demo-hub-page .boutique-heading > p {
  width: 8rem;
  flex: 0 0 8rem;
  margin: 0;
  color: #a34f31;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-heading h3 {
  width: min(64%, 62rem);
  margin: 0;
  font-size: clamp(4rem, 7.5vw, 8rem);
  line-height: 0.88;
}

.demo-hub-page .boutique-heading > span {
  width: min(20%, 21rem);
  line-height: 1.65;
}

.demo-hub-page .boutique-new__categories {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .boutique-new__categories article {
  display: flex;
  width: 33.333%;
  flex-direction: column;
}

.demo-hub-page .boutique-new__categories figure {
  aspect-ratio: 0.76;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .boutique-new__categories article > div {
  display: flex;
  min-height: 13rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 0;
}

.demo-hub-page .boutique-new__categories p {
  margin: 0 0 0.6rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2.3rem;
}

.demo-hub-page .boutique-new__categories span {
  line-height: 1.55;
}

.demo-hub-page .boutique-new__categories a {
  margin-top: auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-shop {
  background: #d9d1c4;
}

.demo-hub-page .boutique-shop > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.demo-hub-page .boutique-shop > header > div:first-child p {
  margin: 0;
  color: #a34f31;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-shop > header h3 {
  margin: 0.75rem 0 0;
  font-size: clamp(4rem, 7vw, 7.5rem);
  line-height: 0.9;
}

.demo-hub-page .boutique-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.demo-hub-page .boutique-filters button {
  padding: 0.55rem 0.85rem;
  border: 1px solid #171714;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-filters button.is-active {
  background: #171714;
  color: #ede9e1;
}

.demo-hub-page .boutique-products {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2rem);
}

.demo-hub-page .boutique-product {
  display: flex;
  width: calc(33.333% - 1.35rem);
  flex-direction: column;
}

.demo-hub-page .boutique-product[hidden] {
  display: none;
}

.demo-hub-page .boutique-product figure {
  position: relative;
  aspect-ratio: 0.78;
  margin: 0;
  overflow: hidden;
  background: #ede9e1;
}

.demo-hub-page .boutique-product figure span {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: #171714;
  color: #ede9e1;
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-product > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 1rem 0 2rem;
}

.demo-hub-page .boutique-product > div p {
  width: 70%;
  margin: 0;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.demo-hub-page .boutique-product > div small {
  width: 70%;
  margin-top: 0.4rem;
  line-height: 1.45;
}

.demo-hub-page .boutique-product > div strong {
  width: 30%;
  text-align: right;
  font-weight: 500;
}

.demo-hub-page .boutique-product > div button {
  width: 100%;
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid #171714;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-product > div button:hover {
  background: #171714;
  color: #ede9e1;
}

.demo-hub-page .boutique-product--wide {
  width: calc(66.666% - 0.7rem);
}

.demo-hub-page .boutique-product--wide figure {
  aspect-ratio: 1.55;
}

.demo-hub-page .boutique-editorial {
  display: flex;
  min-height: 58rem;
  background: #a34f31;
  color: #f1eee7;
}

.demo-hub-page .boutique-editorial figure {
  width: 43%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .boutique-editorial figure:last-child {
  width: 20%;
}

.demo-hub-page .boutique-editorial > div {
  display: flex;
  width: 37%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 5vw, 5.5rem);
}

.demo-hub-page .boutique-editorial > div p {
  margin: 0;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-editorial > div h3 {
  margin: 1.5rem 0;
  font-size: clamp(3.5rem, 5.8vw, 6.5rem);
  line-height: 0.88;
}

.demo-hub-page .boutique-editorial > div span {
  line-height: 1.65;
}

.demo-hub-page .boutique-editorial > div a {
  margin-top: 2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-story {
  display: flex;
  min-height: 56rem;
}

.demo-hub-page .boutique-story > div:first-child {
  display: flex;
  width: 45%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .boutique-story > div:first-child p {
  margin: 0;
  color: #a34f31;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-story > div:first-child h3 {
  margin: 1.5rem 0;
  font-size: clamp(4.5rem, 7vw, 8rem);
  line-height: 0.86;
}

.demo-hub-page .boutique-story > div:first-child span {
  max-width: 35rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}

.demo-hub-page .boutique-story > div:first-child a {
  margin-top: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-story__images {
  position: relative;
  display: flex;
  width: 55%;
  align-items: flex-end;
  background: #8b8d7d;
}

.demo-hub-page .boutique-story__images figure {
  width: 78%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .boutique-story__images figure:last-child {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 34%;
  height: 43%;
  border: 0.5rem solid #8b8d7d;
}

.demo-hub-page .boutique-store {
  display: flex;
  min-height: 56rem;
  background: #1c1b18;
  color: #f1eee7;
}

.demo-hub-page .boutique-store__visual {
  position: relative;
  width: 58%;
}

.demo-hub-page .boutique-store__visual figure {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .boutique-store__visual > div {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  padding: 1.5rem;
  background: #ede9e1;
  color: #171714;
}

.demo-hub-page .boutique-store__visual > div p {
  margin: 0;
  color: #a34f31;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-store__visual > div h3 {
  margin: 0.7rem 0 0;
  font-size: clamp(2.7rem, 4vw, 4.8rem);
  line-height: 0.9;
}

.demo-hub-page .boutique-store__details {
  display: flex;
  width: 42%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.demo-hub-page .boutique-store__details > p:first-child {
  color: #c97b5d;
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-store__details h3 {
  margin: 1rem 0;
  font-size: clamp(4rem, 6vw, 6.5rem);
  line-height: 0.9;
}

.demo-hub-page .boutique-store__details address {
  font-style: normal;
  line-height: 1.6;
}

.demo-hub-page .boutique-store__details > div {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin: 2rem 0;
  border-top: 1px solid rgba(241, 238, 231, 0.3);
}

.demo-hub-page .boutique-store__details article {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(241, 238, 231, 0.3);
}

.demo-hub-page .boutique-store__details article span {
  font-size: 0.7rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-store__details > p:not(:first-child) {
  max-width: 30rem;
  line-height: 1.6;
}

.demo-hub-page .boutique-store__details > a {
  margin-top: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-newsletter {
  display: flex;
  min-height: 32rem;
  align-items: center;
  gap: clamp(3rem, 10vw, 11rem);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #cbc4b6;
}

.demo-hub-page .boutique-newsletter > div {
  width: 52%;
}

.demo-hub-page .boutique-newsletter > div p {
  margin: 0;
  color: #a34f31;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-newsletter > div h3 {
  margin: 1rem 0;
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  line-height: 0.9;
}

.demo-hub-page .boutique-newsletter > div span {
  line-height: 1.6;
}

.demo-hub-page .boutique-newsletter form {
  display: flex;
  width: 48%;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.demo-hub-page .boutique-newsletter label {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .boutique-newsletter label span {
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-newsletter input {
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 20, 0.5);
  background: transparent;
}

.demo-hub-page .boutique-newsletter button {
  align-self: flex-end;
  padding: 0.85rem 1.4rem;
  border: 0;
  background: #171714;
  color: #ede9e1;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-newsletter form small {
  width: 100%;
}

.demo-hub-page .boutique-final {
  position: relative;
  min-height: 50rem;
  color: #fff;
}

.demo-hub-page .boutique-final figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.demo-hub-page .boutique-final figure::after {
  position: absolute;
  inset: 0;
  background: rgba(24, 20, 17, 0.5);
  content: "";
}

.demo-hub-page .boutique-final > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 50rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
}

.demo-hub-page .boutique-final > div p {
  font-size: 0.57rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .boutique-final > div h3 {
  margin: 1rem 0 2rem;
  font-size: clamp(5rem, 9vw, 10rem);
  line-height: 0.82;
}

.demo-hub-page .boutique-final > div a {
  padding: 0.9rem 1.5rem;
  background: #fff;
  color: #171714;
  font-size: 0.57rem;
  text-transform: uppercase;
}

.demo-hub-page .boutique-footer {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4.5rem);
}

.demo-hub-page .boutique-footer > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-hub-page .boutique-footer > div:first-child {
  margin-right: auto;
}

.demo-hub-page .boutique-footer strong {
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
}

.demo-hub-page .boutique-footer p,
.demo-hub-page .boutique-footer a,
.demo-hub-page .boutique-footer span {
  margin: 0;
  font-size: 0.57rem;
  letter-spacing: 0.07em;
}

.demo-hub-page .boutique-footer p {
  color: #a34f31;
  text-transform: uppercase;
}

.demo-hub-page .boutique-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  background: rgba(23, 23, 20, 0.55);
}

.demo-hub-page .boutique-overlay[hidden] {
  display: none;
}

.demo-hub-page .boutique-cart {
  position: fixed;
  z-index: 1201;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(34rem, 100%);
  flex-direction: column;
  padding: 1.5rem;
  background: #ede9e1;
  color: #171714;
  transform: translateX(105%);
  transition: transform 300ms ease;
}

.demo-hub-page .boutique-cart.is-open {
  transform: translateX(0);
}

.demo-hub-page .boutique-cart > header,
.demo-hub-page .boutique-cart > footer,
.demo-hub-page .boutique-cart article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.demo-hub-page .boutique-cart > header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(23, 23, 20, 0.25);
}

.demo-hub-page .boutique-cart > header p {
  margin: 0 0 0.3rem;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.demo-hub-page .boutique-cart > header button {
  border: 0;
  background: transparent;
  font-size: 1.7rem;
}

.demo-hub-page .boutique-cart > footer {
  margin-top: auto;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(23, 23, 20, 0.25);
}

.demo-hub-page .boutique-cart > footer label,
.demo-hub-page .boutique-cart > footer > div {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.demo-hub-page .boutique-cart > footer p {
  margin: 0;
  font-size: 0.68rem;
}

.demo-hub-page .boutique-cart > footer > button {
  width: 100%;
  padding: 1rem;
  border: 0;
  background: #171714;
  color: #ede9e1;
  text-transform: uppercase;
}

.demo-hub-page .boutique-cart__items {
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.demo-hub-page .boutique-cart__items article {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(23, 23, 20, 0.2);
}

.demo-hub-page .boutique-cart__items article div {
  display: flex;
  flex-direction: column;
}

.demo-hub-page .boutique-cart__items article button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.55rem;
}@media (max-width: 820px) {
  .demo-hub-page .demo-hub__intro {
    min-height: 0;
    padding-top: 8rem;
  }
  .demo-hub-page .demo-hub__tabs,
  .demo-hub-page .demo-hub__selector {
    flex-basis: 100%;
  }
  .demo-hub-page .demo-site__bar span {
    display: none;
  }
  .demo-hub-page .demo-site__hero {
    min-height: 0;
    flex-direction: column;
  }
  .demo-hub-page .demo-site__hero-copy,
  .demo-hub-page .demo-site__hero-image {
    width: 100%;
  }
  .demo-hub-page .demo-site__hero-copy {
    min-height: 34rem;
    padding: 3rem 1.5rem;
  }
  .demo-hub-page .demo-site__hero-image {
    height: 70vw;
    min-height: 22rem;
  }
  .demo-hub-page .demo-site__feature-list,
  .demo-hub-page .demo-site__steps ol,
  .demo-hub-page .demo-conversion__packages {
    flex-direction: column;
  }
  .demo-hub-page .demo-site__feature-list article,
  .demo-hub-page .demo-site__steps li,
  .demo-hub-page .demo-conversion__packages article {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }
  .demo-hub-page .demo-site__proof,
  .demo-hub-page .demo-site__enquiry,
  .demo-hub-page .demo-site__final,
  .demo-hub-page .demo-conversion__lead {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site__proof > div,
  .demo-hub-page .demo-site__proof > p,
  .demo-hub-page .demo-site__enquiry > div,
  .demo-hub-page .demo-site__enquiry > form {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .demo-conversion__offer {
    max-width: none;
    flex-basis: auto;
  }
  .demo-hub-page .pottery-nav nav {
    display: none;
  }
  .demo-hub-page .pottery-nav > button {
    margin-left: auto;
  }
  .demo-hub-page .pottery-hero,
  .demo-hub-page .pottery-commission,
  .demo-hub-page .pottery-about,
  .demo-hub-page .pottery-final {
    flex-direction: column;
  }
  .demo-hub-page .pottery-hero__copy,
  .demo-hub-page .pottery-hero__visual,
  .demo-hub-page .pottery-commission__visuals,
  .demo-hub-page .pottery-commission__copy,
  .demo-hub-page .pottery-about__copy,
  .demo-hub-page .pottery-about__images,
  .demo-hub-page .pottery-final figure,
  .demo-hub-page .pottery-final > div {
    width: 100%;
  }
  .demo-hub-page .pottery-hero__copy {
    min-height: 34rem;
  }
  .demo-hub-page .pottery-hero__visual {
    min-height: 34rem;
  }
  .demo-hub-page .pottery-section-heading {
    flex-direction: column;
    gap: 1.5rem;
  }
  .demo-hub-page .pottery-section-heading > p {
    width: auto;
    flex-basis: auto;
  }
  .demo-hub-page .pottery-shop__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .pottery-shop__filters {
    justify-content: flex-start;
  }
  .demo-hub-page .pottery-shop-card {
    width: calc(50% - 1px);
    flex-basis: calc(50% - 1px);
  }
  .demo-hub-page .pottery-commerce-notes {
    flex-wrap: wrap;
  }
  .demo-hub-page .pottery-commerce-notes article {
    width: 50%;
    flex-basis: 50%;
    border-bottom: 1px solid rgba(41, 35, 29, 0.22);
  }
  .demo-hub-page .pottery-detail {
    flex-direction: column;
  }
  .demo-hub-page .pottery-detail > figure,
  .demo-hub-page .pottery-detail > div {
    width: 100%;
  }
  .demo-hub-page .pottery-detail > figure {
    min-height: 28rem;
    max-height: 55svh;
  }
  .demo-hub-page .pottery-editorial .pottery-editorial__large {
    width: 60%;
  }
  .demo-hub-page .pottery-editorial__statement {
    width: 40%;
  }
  .demo-hub-page .pottery-editorial figure:nth-of-type(2),
  .demo-hub-page .pottery-editorial figure:nth-of-type(3) {
    width: 50%;
  }
  .demo-hub-page .pottery-editorial figure:nth-of-type(n + 4) {
    width: 33.333%;
  }
  .demo-hub-page .pottery-commission__visuals {
    min-height: 38rem;
  }
  .demo-hub-page .pottery-about__copy {
    min-height: 34rem;
  }
  .demo-hub-page .pottery-about__images {
    min-height: 32rem;
  }
  .demo-hub-page .pottery-find__details {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .pottery-find__details article,
  .demo-hub-page .pottery-find__details button {
    width: 100%;
  }
  .demo-hub-page .pottery-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .pottery-footer strong {
    width: 100%;
  }
  .demo-hub-page .photo-nav nav {
    display: none;
  }
  .demo-hub-page .photo-nav__enquire {
    margin-left: auto;
  }
  .demo-hub-page .photo-hero,
  .demo-hub-page .photo-experience,
  .demo-hub-page .photo-pricing,
  .demo-hub-page .photo-enquire {
    flex-direction: column;
  }
  .demo-hub-page .photo-hero__copy,
  .demo-hub-page .photo-hero__main,
  .demo-hub-page .photo-experience__copy,
  .demo-hub-page .photo-experience__images,
  .demo-hub-page .photo-pricing > header,
  .demo-hub-page .photo-pricing__options,
  .demo-hub-page .photo-enquire__visual,
  .demo-hub-page .photo-enquire form {
    width: 100%;
  }
  .demo-hub-page .photo-hero__copy {
    min-height: 42rem;
  }
  .demo-hub-page .photo-hero__main {
    min-height: 42rem;
  }
  .demo-hub-page .photo-hero__detail {
    right: 1.5rem;
    bottom: 36rem;
  }
  .demo-hub-page .photo-manifesto__mosaic {
    flex-wrap: wrap;
  }
  .demo-hub-page .photo-manifesto__mosaic figure,
  .demo-hub-page .photo-manifesto__mosaic figure:nth-child(2),
  .demo-hub-page .photo-manifesto__mosaic figure:nth-child(3),
  .demo-hub-page .photo-manifesto__mosaic figure:nth-child(4) {
    width: calc(50% - 0.75rem);
    aspect-ratio: 1;
  }
  .demo-hub-page .photo-section-heading {
    flex-direction: column;
  }
  .demo-hub-page .photo-section-heading > p,
  .demo-hub-page .photo-section-heading > h3,
  .demo-hub-page .photo-section-heading > div {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .photo-session-list article {
    flex-wrap: wrap;
  }
  .demo-hub-page .photo-session-list article > div {
    width: calc(100% - 5rem);
  }
  .demo-hub-page .photo-session-list article figure {
    width: calc(100% - 11rem);
    height: 16rem;
    margin-left: 4rem;
  }
  .demo-hub-page .photo-story,
  .demo-hub-page .photo-story--lead {
    width: calc(50% - 1rem);
  }
  .demo-hub-page .photo-story--wide {
    width: 100%;
  }
  .demo-hub-page .photo-experience__images {
    min-height: 44rem;
  }
  .demo-hub-page .photo-pricing__options {
    margin-top: 2rem;
  }
  .demo-hub-page .photo-faq__items {
    width: 100%;
  }
  .demo-hub-page .photo-enquire__visual {
    min-height: 34rem;
  }
  .demo-hub-page .photo-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .photo-footer > div {
    width: 100%;
  }
  .demo-hub-page .jewel-nav nav {
    display: none;
  }
  .demo-hub-page .jewel-nav__menu {
    display: flex;
    width: 1.5rem;
    flex-direction: column;
    gap: 0.3rem;
  }
  .demo-hub-page .jewel-nav__menu span {
    width: 100%;
    height: 1px;
    background: currentColor;
  }
  .demo-hub-page .jewel-intro,
  .demo-hub-page .jewel-heading,
  .demo-hub-page .jewel-editorial,
  .demo-hub-page .jewel-process__body,
  .demo-hub-page .jewel-custom,
  .demo-hub-page .jewel-local__content {
    flex-direction: column;
  }
  .demo-hub-page .jewel-intro > p,
  .demo-hub-page .jewel-intro h3,
  .demo-hub-page .jewel-intro > span,
  .demo-hub-page .jewel-heading > div,
  .demo-hub-page .jewel-heading > p,
  .demo-hub-page .jewel-editorial__portrait,
  .demo-hub-page .jewel-editorial__copy,
  .demo-hub-page .jewel-editorial__detail,
  .demo-hub-page .jewel-process__images,
  .demo-hub-page .jewel-process__steps,
  .demo-hub-page .jewel-custom__copy,
  .demo-hub-page .jewel-custom form,
  .demo-hub-page .jewel-local__content figure,
  .demo-hub-page .jewel-local__content > div {
    width: 100%;
  }
  .demo-hub-page .jewel-products article {
    width: 50%;
  }
  .demo-hub-page .jewel-editorial__portrait,
  .demo-hub-page .jewel-editorial__detail {
    min-height: 38rem;
  }
  .demo-hub-page .jewel-editorial__copy {
    min-height: 34rem;
  }
  .demo-hub-page .jewel-process__images {
    min-height: 42rem;
  }
  .demo-hub-page .jewel-custom__copy {
    min-height: 44rem;
  }
  .demo-hub-page .jewel-local__content figure {
    min-height: 35rem;
  }
  .demo-hub-page .jewel-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .jewel-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .bake-nav nav {
    display: none;
  }
  .demo-hub-page .bake-nav > button {
    margin-left: auto;
  }
  .demo-hub-page .bake-hero,
  .demo-hub-page .bake-box,
  .demo-hub-page .bake-cakes,
  .demo-hub-page .bake-details,
  .demo-hub-page .bake-final {
    flex-direction: column;
  }
  .demo-hub-page .bake-hero__copy,
  .demo-hub-page .bake-hero > figure,
  .demo-hub-page .bake-box__copy,
  .demo-hub-page .bake-box__images,
  .demo-hub-page .bake-cakes__visual,
  .demo-hub-page .bake-cakes form,
  .demo-hub-page .bake-details > div,
  .demo-hub-page .bake-details figure,
  .demo-hub-page .bake-final > div,
  .demo-hub-page .bake-final figure {
    width: 100%;
  }
  .demo-hub-page .bake-hero__copy,
  .demo-hub-page .bake-hero > figure {
    min-height: 40rem;
  }
  .demo-hub-page .bake-heading {
    flex-direction: column;
  }
  .demo-hub-page .bake-heading > p,
  .demo-hub-page .bake-heading h3,
  .demo-hub-page .bake-heading > span {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .bake-week__categories {
    flex-wrap: wrap;
  }
  .demo-hub-page .bake-week__categories article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .bake-week__categories article:last-child {
    width: 100%;
    flex-direction: row;
  }
  .demo-hub-page .bake-week__categories article:last-child figure,
  .demo-hub-page .bake-week__categories article:last-child > div {
    width: 50%;
  }
  .demo-hub-page .bake-shop > header {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .bake-filters {
    justify-content: flex-start;
  }
  .demo-hub-page .bake-product,
  .demo-hub-page .bake-product--feature {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .bake-box__copy {
    min-height: 38rem;
  }
  .demo-hub-page .bake-box__images {
    min-height: 42rem;
  }
  .demo-hub-page .bake-cakes__visual,
  .demo-hub-page .bake-details figure,
  .demo-hub-page .bake-final figure {
    min-height: 38rem;
  }
  .demo-hub-page .bake-ordering > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .bake-ordering > div article {
    width: 50%;
  }
  .demo-hub-page .bake-ordering > div article:last-child {
    width: 100%;
    border-top: 1px solid rgba(255, 241, 215, 0.45);
  }
  .demo-hub-page .bake-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .bake-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .flower-nav nav {
    display: none;
  }
  .demo-hub-page .flower-nav > button {
    margin-left: auto;
  }
  .demo-hub-page .flower-hero__copy {
    width: 82%;
  }
  .demo-hub-page .flower-heading,
  .demo-hub-page .flower-editorial,
  .demo-hub-page .flower-style,
  .demo-hub-page .flower-events,
  .demo-hub-page .flower-delivery__body {
    flex-direction: column;
  }
  .demo-hub-page .flower-heading > p,
  .demo-hub-page .flower-heading h3,
  .demo-hub-page .flower-heading > span,
  .demo-hub-page .flower-editorial .flower-editorial__large,
  .demo-hub-page .flower-editorial > div,
  .demo-hub-page .flower-editorial > figure:last-child,
  .demo-hub-page .flower-style__copy,
  .demo-hub-page .flower-style__images,
  .demo-hub-page .flower-events__visual,
  .demo-hub-page .flower-events form,
  .demo-hub-page .flower-delivery__body > div,
  .demo-hub-page .flower-delivery__body > figure {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .flower-occasions {
    flex-wrap: wrap;
  }
  .demo-hub-page .flower-occasions article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .flower-occasions article:last-child {
    width: 100%;
    flex-direction: row;
  }
  .demo-hub-page .flower-occasions article:last-child figure,
  .demo-hub-page .flower-occasions article:last-child > div {
    width: 50%;
  }
  .demo-hub-page .flower-shop > header {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .flower-filters {
    justify-content: flex-start;
  }
  .demo-hub-page .flower-products article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .flower-editorial .flower-editorial__large,
  .demo-hub-page .flower-editorial > figure:last-child {
    min-height: 38rem;
  }
  .demo-hub-page .flower-editorial > div,
  .demo-hub-page .flower-style__copy {
    min-height: 35rem;
  }
  .demo-hub-page .flower-style__images,
  .demo-hub-page .flower-events__visual,
  .demo-hub-page .flower-delivery__body > figure {
    min-height: 43rem;
  }
  .demo-hub-page .flower-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .flower-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .artist-nav nav {
    display: none;
  }
  .demo-hub-page .artist-nav > button {
    margin-left: auto;
  }
  .demo-hub-page .artist-hero,
  .demo-hub-page .artist-statement,
  .demo-hub-page .artist-heading,
  .demo-hub-page .artist-editorial,
  .demo-hub-page .artist-commissions,
  .demo-hub-page .artist-about,
  .demo-hub-page .artist-final {
    flex-direction: column;
  }
  .demo-hub-page .artist-hero__copy,
  .demo-hub-page .artist-hero__gallery,
  .demo-hub-page .artist-statement > p,
  .demo-hub-page .artist-statement h3,
  .demo-hub-page .artist-statement > span,
  .demo-hub-page .artist-heading > p,
  .demo-hub-page .artist-heading h3,
  .demo-hub-page .artist-heading > span,
  .demo-hub-page .artist-editorial > div,
  .demo-hub-page .artist-editorial figure,
  .demo-hub-page .artist-editorial figure:last-child,
  .demo-hub-page .artist-commissions__intro,
  .demo-hub-page .artist-commissions form,
  .demo-hub-page .artist-about__portrait,
  .demo-hub-page .artist-about__copy,
  .demo-hub-page .artist-final > div,
  .demo-hub-page .artist-final figure {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .artist-hero__copy,
  .demo-hub-page .artist-hero__gallery {
    min-height: 43rem;
  }
  .demo-hub-page .artist-work__types {
    flex-wrap: wrap;
  }
  .demo-hub-page .artist-work__types article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .artist-work__types article:last-child {
    width: 100%;
    flex-direction: row;
  }
  .demo-hub-page .artist-work__types article:last-child figure,
  .demo-hub-page .artist-work__types article:last-child > div {
    width: 50%;
  }
  .demo-hub-page .artist-originals > header {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .artist-product,
  .demo-hub-page .artist-product--large {
    width: calc(50% - 1rem);
  }
  .demo-hub-page .artist-product figure,
  .demo-hub-page .artist-product--large figure {
    aspect-ratio: 0.9;
  }
  .demo-hub-page .artist-editorial figure,
  .demo-hub-page .artist-editorial figure:last-child,
  .demo-hub-page .artist-about__portrait,
  .demo-hub-page .artist-final figure {
    min-height: 40rem;
  }
  .demo-hub-page .artist-editorial > div,
  .demo-hub-page .artist-about__copy,
  .demo-hub-page .artist-final > div {
    min-height: 36rem;
  }
  .demo-hub-page .artist-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .artist-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .grooming-nav nav {
    display: none;
  }
  .demo-hub-page .grooming-book-link {
    margin-left: auto;
  }
  .demo-hub-page .grooming-hero,
  .demo-hub-page .grooming-heading,
  .demo-hub-page .grooming-pricing,
  .demo-hub-page .grooming-experience,
  .demo-hub-page .grooming-book {
    flex-direction: column;
  }
  .demo-hub-page .grooming-hero__copy,
  .demo-hub-page .grooming-hero__dog,
  .demo-hub-page .grooming-heading > p,
  .demo-hub-page .grooming-heading h3,
  .demo-hub-page .grooming-heading > span,
  .demo-hub-page .grooming-pricing > div,
  .demo-hub-page .grooming-pricing > figure,
  .demo-hub-page .grooming-experience__images,
  .demo-hub-page .grooming-experience__copy,
  .demo-hub-page .grooming-book > div,
  .demo-hub-page .grooming-book > form {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .grooming-hero__copy,
  .demo-hub-page .grooming-hero__dog {
    min-height: 43rem;
  }
  .demo-hub-page .grooming-hero > aside {
    top: auto;
    right: 2rem;
    bottom: 2rem;
    width: min(22rem, 40%);
  }
  .demo-hub-page .grooming-service-list {
    flex-wrap: wrap;
  }
  .demo-hub-page .grooming-service-list article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .grooming-service-list article:last-child {
    width: 100%;
    flex-direction: row;
  }
  .demo-hub-page .grooming-service-list article:last-child figure,
  .demo-hub-page .grooming-service-list article:last-child > div {
    width: 50%;
  }
  .demo-hub-page .grooming-pricing > figure,
  .demo-hub-page .grooming-experience__images {
    min-height: 44rem;
  }
  .demo-hub-page .grooming-book > div figure {
    width: 60%;
  }
  .demo-hub-page .grooming-gallery figure,
  .demo-hub-page .grooming-gallery__large,
  .demo-hub-page .grooming-gallery__wide {
    width: calc(50% - 0.5rem) !important;
  }
  .demo-hub-page .grooming-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .grooming-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .auto-nav nav,
  .demo-hub-page .auto-call {
    display: none;
  }
  .demo-hub-page .auto-book-link {
    margin-left: auto;
  }
  .demo-hub-page .auto-hero__copy {
    width: 86%;
  }
  .demo-hub-page .auto-hero > aside {
    width: min(32rem, 44%);
  }
  .demo-hub-page .auto-heading,
  .demo-hub-page .auto-difference,
  .demo-hub-page .auto-appointment,
  .demo-hub-page .auto-process {
    flex-direction: column;
  }
  .demo-hub-page .auto-heading > p,
  .demo-hub-page .auto-heading h3,
  .demo-hub-page .auto-heading > span,
  .demo-hub-page .auto-difference__visual,
  .demo-hub-page .auto-difference__copy,
  .demo-hub-page .auto-appointment > div,
  .demo-hub-page .auto-appointment > form,
  .demo-hub-page .auto-process > header,
  .demo-hub-page .auto-process > div {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .auto-service,
  .demo-hub-page .auto-service--large,
  .demo-hub-page .auto-service--wide {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .auto-service--wide {
    flex-direction: column;
  }
  .demo-hub-page .auto-service--wide figure,
  .demo-hub-page .auto-service--wide > div {
    width: 100%;
  }
  .demo-hub-page .auto-difference__visual {
    min-height: 46rem;
  }
  .demo-hub-page .auto-appointment > div figure {
    width: 60%;
  }
  .demo-hub-page .auto-reviews > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .auto-reviews > div article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .auto-reviews > div figure {
    width: 100%;
  }
  .demo-hub-page .auto-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .auto-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .plumbing-nav nav,
  .demo-hub-page .plumbing-call {
    display: none;
  }
  .demo-hub-page .plumbing-request-link {
    margin-left: auto;
  }
  .demo-hub-page .plumbing-hero,
  .demo-hub-page .plumbing-emergency,
  .demo-hub-page .plumbing-request,
  .demo-hub-page .plumbing-pricing,
  .demo-hub-page .plumbing-area,
  .demo-hub-page .plumbing-heading {
    flex-direction: column;
  }
  .demo-hub-page .plumbing-hero__copy,
  .demo-hub-page .plumbing-hero__images,
  .demo-hub-page .plumbing-emergency > div,
  .demo-hub-page .plumbing-emergency > figure,
  .demo-hub-page .plumbing-request__intro,
  .demo-hub-page .plumbing-request > form,
  .demo-hub-page .plumbing-pricing > figure,
  .demo-hub-page .plumbing-pricing > div,
  .demo-hub-page .plumbing-area > div,
  .demo-hub-page .plumbing-area > figure,
  .demo-hub-page .plumbing-heading > p,
  .demo-hub-page .plumbing-heading h3,
  .demo-hub-page .plumbing-heading > span {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .plumbing-hero__copy,
  .demo-hub-page .plumbing-hero__images {
    min-height: 44rem;
  }
  .demo-hub-page .plumbing-hero > aside {
    width: min(29rem, 44%);
  }
  .demo-hub-page .plumbing-service-list {
    flex-wrap: wrap;
  }
  .demo-hub-page .plumbing-service-list article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .plumbing-emergency > figure,
  .demo-hub-page .plumbing-pricing > figure,
  .demo-hub-page .plumbing-area > figure {
    min-height: 43rem;
  }
  .demo-hub-page .plumbing-request__intro figure {
    width: 60%;
  }
  .demo-hub-page .plumbing-reviews > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .plumbing-reviews > div article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .plumbing-reviews > div figure {
    width: 100%;
  }
  .demo-hub-page .plumbing-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .plumbing-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .landscape-nav nav,
  .demo-hub-page .landscape-call {
    display: none;
  }
  .demo-hub-page .landscape-quote-link {
    margin-left: auto;
  }
  .demo-hub-page .landscape-hero__copy {
    width: 86%;
  }
  .demo-hub-page .landscape-hero > aside {
    width: min(28rem, 42%);
  }
  .demo-hub-page .landscape-heading,
  .demo-hub-page .landscape-why,
  .demo-hub-page .landscape-quote,
  .demo-hub-page .landscape-area {
    flex-direction: column;
  }
  .demo-hub-page .landscape-heading > p,
  .demo-hub-page .landscape-heading h3,
  .demo-hub-page .landscape-heading > span,
  .demo-hub-page .landscape-why > div:first-child,
  .demo-hub-page .landscape-promises,
  .demo-hub-page .landscape-quote__visual,
  .demo-hub-page .landscape-quote > form,
  .demo-hub-page .landscape-area > div,
  .demo-hub-page .landscape-area > figure {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .landscape-service-list {
    flex-wrap: wrap;
  }
  .demo-hub-page .landscape-service-list article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .landscape-service-list article:last-child {
    width: 100%;
    flex-direction: row;
  }
  .demo-hub-page .landscape-service-list article:last-child figure,
  .demo-hub-page .landscape-service-list article:last-child > div {
    width: 50%;
  }
  .demo-hub-page .landscape-project-strip {
    flex-wrap: wrap;
  }
  .demo-hub-page .landscape-project-strip figure {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .landscape-why > div:first-child figure {
    width: 60%;
  }
  .demo-hub-page .landscape-quote__visual,
  .demo-hub-page .landscape-area > figure {
    min-height: 44rem;
  }
  .demo-hub-page .landscape-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .landscape-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .cleaning-nav nav {
    display: none;
  }
  .demo-hub-page .cleaning-nav__quote {
    margin-left: auto;
  }
  .demo-hub-page .cleaning-hero,
  .demo-hub-page .cleaning-quote,
  .demo-hub-page .cleaning-process,
  .demo-hub-page .cleaning-area,
  .demo-hub-page .cleaning-heading {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-hero__copy,
  .demo-hub-page .cleaning-hero > figure,
  .demo-hub-page .cleaning-quote__intro,
  .demo-hub-page .cleaning-quote > form,
  .demo-hub-page .cleaning-process__visual,
  .demo-hub-page .cleaning-process__steps,
  .demo-hub-page .cleaning-area > div,
  .demo-hub-page .cleaning-area > figure,
  .demo-hub-page .cleaning-heading > p,
  .demo-hub-page .cleaning-heading h3,
  .demo-hub-page .cleaning-heading > span {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .cleaning-hero__copy,
  .demo-hub-page .cleaning-hero > figure {
    min-height: 42rem;
  }
  .demo-hub-page .cleaning-hero > aside {
    right: 2rem;
    bottom: 2rem;
  }
  .demo-hub-page .cleaning-service-list {
    flex-wrap: wrap;
  }
  .demo-hub-page .cleaning-service-list article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .cleaning-service-list article:last-child {
    width: 100%;
    flex-direction: row;
  }
  .demo-hub-page .cleaning-service-list article:last-child figure,
  .demo-hub-page .cleaning-service-list article:last-child > div {
    width: 50%;
  }
  .demo-hub-page .cleaning-quote__intro figure {
    width: 60%;
  }
  .demo-hub-page .cleaning-included__content {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-included__content > figure,
  .demo-hub-page .cleaning-included__content .cleaning-checklist {
    width: 100%;
  }
  .demo-hub-page .cleaning-included__content > figure {
    min-height: 42rem;
  }
  .demo-hub-page .cleaning-checklist {
    padding-left: 0;
  }
  .demo-hub-page .cleaning-process__visual,
  .demo-hub-page .cleaning-area > figure {
    min-height: 44rem;
  }
  .demo-hub-page .cleaning-reviews > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .cleaning-reviews > div article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .cleaning-reviews > div figure {
    width: 100%;
  }
  .demo-hub-page .cleaning-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .cleaning-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .contractor-nav nav,
  .demo-hub-page .contractor-call {
    display: none;
  }
  .demo-hub-page .contractor-quote-link {
    margin-left: auto;
  }
  .demo-hub-page .contractor-hero {
    flex-direction: column;
  }
  .demo-hub-page .contractor-hero > figure {
    width: 100%;
    min-height: 43rem;
  }
  .demo-hub-page .contractor-hero__copy {
    width: 100%;
    min-height: 47rem;
    padding-right: clamp(1.5rem, 6vw, 5rem);
  }
  .demo-hub-page .contractor-quick-form {
    position: relative;
    right: auto;
    top: auto;
    width: calc(100% - 3rem);
    max-width: 42rem;
    margin: -8rem auto 4rem;
    transform: none;
  }
  .demo-hub-page .contractor-heading {
    flex-direction: column;
  }
  .demo-hub-page .contractor-heading > p,
  .demo-hub-page .contractor-heading h3,
  .demo-hub-page .contractor-heading > span {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .contractor-service-list {
    flex-wrap: wrap;
  }
  .demo-hub-page .contractor-service-list article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .contractor-service-list article:last-child {
    width: 100%;
    flex-direction: row;
  }
  .demo-hub-page .contractor-service-list article:last-child figure,
  .demo-hub-page .contractor-service-list article:last-child > div {
    width: 50%;
  }
  .demo-hub-page .contractor-project,
  .demo-hub-page .contractor-project--large,
  .demo-hub-page .contractor-project--wide {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .contractor-process {
    flex-direction: column;
  }
  .demo-hub-page .contractor-process > header,
  .demo-hub-page .contractor-process > div {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .contractor-pricing,
  .demo-hub-page .contractor-area {
    flex-direction: column;
  }
  .demo-hub-page .contractor-pricing figure,
  .demo-hub-page .contractor-pricing > figure,
  .demo-hub-page .contractor-pricing > div,
  .demo-hub-page .contractor-area figure,
  .demo-hub-page .contractor-area > figure,
  .demo-hub-page .contractor-area > div {
    width: 100%;
  }
  .demo-hub-page .contractor-pricing figure,
  .demo-hub-page .contractor-pricing > figure,
  .demo-hub-page .contractor-area figure,
  .demo-hub-page .contractor-area > figure {
    min-height: 42rem;
  }
  .demo-hub-page .contractor-pricing > div,
  .demo-hub-page .contractor-area > div {
    min-height: 38rem;
  }
  .demo-hub-page .contractor-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .contractor-footer > div:first-child {
    width: 100%;
  }
  .demo-hub-page .boutique-nav nav {
    display: none;
  }
  .demo-hub-page .boutique-nav > button {
    margin-left: auto;
  }
  .demo-hub-page .boutique-hero,
  .demo-hub-page .boutique-heading,
  .demo-hub-page .boutique-editorial,
  .demo-hub-page .boutique-story,
  .demo-hub-page .boutique-store,
  .demo-hub-page .boutique-newsletter {
    flex-direction: column;
  }
  .demo-hub-page .grooming-nav {
    min-height: 5rem;
    padding: 0 1rem;
  }
  .demo-hub-page .grooming-brand {
    min-width: 8rem;
  }
  .demo-hub-page .grooming-brand span {
    font-size: 0.43rem;
  }
  .demo-hub-page .grooming-brand strong {
    font-size: 1rem;
  }
  .demo-hub-page .grooming-book-link {
    padding: 0.8rem;
    font-size: 0.47rem;
  }
  .demo-hub-page .grooming-hero__copy,
  .demo-hub-page .grooming-pricing > div,
  .demo-hub-page .grooming-experience__copy,
  .demo-hub-page .grooming-book > div,
  .demo-hub-page .grooming-book > form {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .grooming-hero__copy {
    min-height: 40rem;
  }
  .demo-hub-page .grooming-hero__copy h2 {
    font-size: clamp(4.2rem, 19vw, 6.3rem);
  }
  .demo-hub-page .grooming-hero__dog {
    min-height: 36rem;
    border-radius: 6rem 0 0 0;
  }
  .demo-hub-page .grooming-hero > aside {
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
    flex-direction: row;
  }
  .demo-hub-page .grooming-hero > aside figure {
    width: 5rem;
    flex: 0 0 5rem;
  }
  .demo-hub-page .grooming-ticker {
    justify-content: flex-start;
    overflow-x: auto;
  }
  .demo-hub-page .grooming-services,
  .demo-hub-page .grooming-gallery {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .grooming-heading {
    gap: 1.25rem;
  }
  .demo-hub-page .grooming-heading h3 {
    font-size: clamp(3.8rem, 17vw, 5.7rem);
  }
  .demo-hub-page .grooming-service-list {
    flex-direction: column;
  }
  .demo-hub-page .grooming-service-list article,
  .demo-hub-page .grooming-service-list article:last-child {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .grooming-service-list article figure,
  .demo-hub-page .grooming-service-list article > div,
  .demo-hub-page .grooming-service-list article:last-child figure,
  .demo-hub-page .grooming-service-list article:last-child > div {
    width: 100%;
  }
  .demo-hub-page .grooming-pricing > div h3,
  .demo-hub-page .grooming-experience__copy h3,
  .demo-hub-page .grooming-book > div h3,
  .demo-hub-page .grooming-gallery > header h3 {
    font-size: clamp(3.8rem, 17vw, 5.7rem);
  }
  .demo-hub-page .grooming-pricing > figure,
  .demo-hub-page .grooming-experience__images {
    min-height: 34rem;
  }
  .demo-hub-page .grooming-experience__images {
    padding: 1rem;
  }
  .demo-hub-page .grooming-experience__images figure {
    width: 88%;
    height: calc(100% - 2rem);
  }
  .demo-hub-page .grooming-experience__images figure:last-child {
    top: 1rem;
    right: 1rem;
  }
  .demo-hub-page .grooming-book > div figure {
    width: 100%;
  }
  .demo-hub-page .grooming-book > form > div {
    flex-direction: column;
  }
  .demo-hub-page .grooming-book > form > div label {
    width: 100%;
  }
  .demo-hub-page .grooming-gallery > div {
    flex-direction: column;
  }
  .demo-hub-page .grooming-gallery figure,
  .demo-hub-page .grooming-gallery__large,
  .demo-hub-page .grooming-gallery__wide {
    width: 100% !important;
    min-height: 30rem !important;
  }
  .demo-hub-page .grooming-final,
  .demo-hub-page .grooming-final > div {
    min-height: 44rem;
  }
  .demo-hub-page .grooming-final > div h3 {
    font-size: clamp(4.2rem, 18vw, 6.2rem);
  }
  .demo-hub-page .grooming-footer {
    flex-direction: column;
  }
  .demo-hub-page .grooming-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .auto-nav {
    min-height: 5rem;
    padding: 0 1rem;
  }
  .demo-hub-page .auto-brand {
    min-width: 9rem;
  }
  .demo-hub-page .auto-brand > span {
    width: 2.1rem;
    height: 2.1rem;
    flex-basis: 2.1rem;
  }
  .demo-hub-page .auto-brand strong {
    font-size: 0.9rem;
  }
  .demo-hub-page .auto-brand small {
    font-size: 0.38rem;
  }
  .demo-hub-page .auto-book-link {
    padding: 0.8rem;
    font-size: 0.46rem;
  }
  .demo-hub-page .auto-hero,
  .demo-hub-page .auto-hero__copy {
    min-height: 53rem;
  }
  .demo-hub-page .auto-hero__copy {
    width: 100%;
    padding: 4rem 1.25rem 12rem;
  }
  .demo-hub-page .auto-hero__copy h2 {
    font-size: clamp(4rem, 17vw, 6rem);
  }
  .demo-hub-page .auto-hero > aside {
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
  }
  .demo-hub-page .auto-principles {
    flex-direction: column;
    gap: 0.7rem;
    padding: 2rem 1rem;
  }
  .demo-hub-page .auto-principles i {
    display: none;
  }
  .demo-hub-page .auto-services,
  .demo-hub-page .auto-reviews,
  .demo-hub-page .auto-process {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .auto-heading {
    gap: 1.25rem;
  }
  .demo-hub-page .auto-heading h3 {
    font-size: clamp(3.8rem, 16vw, 5.5rem);
  }
  .demo-hub-page .auto-service-list {
    flex-direction: column;
  }
  .demo-hub-page .auto-service,
  .demo-hub-page .auto-service--large,
  .demo-hub-page .auto-service--wide {
    width: 100%;
  }
  .demo-hub-page .auto-difference__visual {
    min-height: 36rem;
    padding: 1rem;
  }
  .demo-hub-page .auto-difference__visual figure {
    width: 88%;
    height: calc(100% - 2rem);
  }
  .demo-hub-page .auto-difference__visual figure:last-child {
    top: 1rem;
    right: 1rem;
  }
  .demo-hub-page .auto-difference__copy,
  .demo-hub-page .auto-appointment > div,
  .demo-hub-page .auto-appointment > form {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .auto-difference__copy h3,
  .demo-hub-page .auto-appointment > div h3,
  .demo-hub-page .auto-reviews > header h3,
  .demo-hub-page .auto-process > header h3 {
    font-size: clamp(3.8rem, 16vw, 5.5rem);
  }
  .demo-hub-page .auto-difference__copy > div {
    flex-direction: column;
  }
  .demo-hub-page .auto-difference__copy > div article {
    width: 100%;
    min-height: 0;
    border-right: 0;
  }
  .demo-hub-page .auto-appointment > div figure {
    width: 100%;
  }
  .demo-hub-page .auto-appointment > form > div {
    flex-direction: column;
  }
  .demo-hub-page .auto-appointment > form > div label {
    width: 100%;
  }
  .demo-hub-page .auto-reviews > div {
    flex-direction: column;
  }
  .demo-hub-page .auto-reviews > div article,
  .demo-hub-page .auto-reviews > div figure {
    width: 100%;
  }
  .demo-hub-page .auto-process > div {
    flex-direction: column;
  }
  .demo-hub-page .auto-process > div article {
    width: 100%;
    min-height: 0;
    padding: 1.5rem 0;
    border-right: 0;
  }
  .demo-hub-page .auto-final,
  .demo-hub-page .auto-final > div {
    min-height: 44rem;
  }
  .demo-hub-page .auto-final > div h3 {
    font-size: clamp(4.1rem, 18vw, 6rem);
  }
  .demo-hub-page .auto-footer {
    flex-direction: column;
  }
  .demo-hub-page .auto-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .plumbing-nav {
    min-height: 5rem;
    padding: 0 1rem;
  }
  .demo-hub-page .plumbing-brand {
    min-width: 9rem;
  }
  .demo-hub-page .plumbing-brand > span {
    width: 2.1rem;
    height: 2.1rem;
    flex-basis: 2.1rem;
  }
  .demo-hub-page .plumbing-brand strong {
    font-size: 0.95rem;
  }
  .demo-hub-page .plumbing-brand small {
    font-size: 0.39rem;
  }
  .demo-hub-page .plumbing-request-link {
    padding: 0.8rem;
    font-size: 0.47rem;
  }
  .demo-hub-page .plumbing-hero__copy,
  .demo-hub-page .plumbing-emergency > div,
  .demo-hub-page .plumbing-request__intro,
  .demo-hub-page .plumbing-request > form,
  .demo-hub-page .plumbing-pricing > div,
  .demo-hub-page .plumbing-area > div {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .plumbing-hero__copy {
    min-height: 42rem;
    padding-bottom: 8rem;
  }
  .demo-hub-page .plumbing-hero__copy h2 {
    font-size: clamp(4rem, 17vw, 6rem);
  }
  .demo-hub-page .plumbing-hero__images {
    min-height: 36rem;
    padding: 1rem;
  }
  .demo-hub-page .plumbing-hero__images figure {
    width: 88%;
    height: calc(100% - 3rem);
  }
  .demo-hub-page .plumbing-hero__images figure:last-child {
    top: 1rem;
    right: 1rem;
  }
  .demo-hub-page .plumbing-hero > aside {
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
  }
  .demo-hub-page .plumbing-trust {
    flex-direction: column;
    gap: 0.7rem;
    padding: 2rem 1rem;
  }
  .demo-hub-page .plumbing-trust i {
    display: none;
  }
  .demo-hub-page .plumbing-services,
  .demo-hub-page .plumbing-reviews {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .plumbing-heading {
    gap: 1.25rem;
  }
  .demo-hub-page .plumbing-heading h3 {
    font-size: clamp(3.8rem, 16vw, 5.5rem);
  }
  .demo-hub-page .plumbing-service-list {
    flex-direction: column;
  }
  .demo-hub-page .plumbing-service-list article {
    width: 100%;
  }
  .demo-hub-page .plumbing-emergency > div h3,
  .demo-hub-page .plumbing-request__intro h3,
  .demo-hub-page .plumbing-pricing > div h3,
  .demo-hub-page .plumbing-reviews > header h3,
  .demo-hub-page .plumbing-area h3 {
    font-size: clamp(3.8rem, 16vw, 5.5rem);
  }
  .demo-hub-page .plumbing-emergency > figure,
  .demo-hub-page .plumbing-pricing > figure,
  .demo-hub-page .plumbing-area > figure {
    min-height: 32rem;
  }
  .demo-hub-page .plumbing-emergency > aside {
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
  }
  .demo-hub-page .plumbing-request__intro figure {
    width: 100%;
  }
  .demo-hub-page .plumbing-request > form > div {
    flex-direction: column;
  }
  .demo-hub-page .plumbing-request > form > div label {
    width: 100%;
  }
  .demo-hub-page .plumbing-reviews > div {
    flex-direction: column;
  }
  .demo-hub-page .plumbing-reviews > div article,
  .demo-hub-page .plumbing-reviews > div figure {
    width: 100%;
  }
  .demo-hub-page .plumbing-area form {
    flex-direction: column;
  }
  .demo-hub-page .plumbing-area form input,
  .demo-hub-page .plumbing-area form button {
    width: 100%;
  }
  .demo-hub-page .plumbing-final,
  .demo-hub-page .plumbing-final > div {
    min-height: 44rem;
  }
  .demo-hub-page .plumbing-final > div h3 {
    font-size: clamp(4.2rem, 18vw, 6.2rem);
  }
  .demo-hub-page .plumbing-footer {
    flex-direction: column;
  }
  .demo-hub-page .plumbing-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .landscape-nav {
    min-height: 5rem;
    padding: 0 1rem;
  }
  .demo-hub-page .landscape-brand {
    min-width: 9rem;
  }
  .demo-hub-page .landscape-brand > span {
    width: 2.1rem;
    height: 2.1rem;
    flex-basis: 2.1rem;
  }
  .demo-hub-page .landscape-brand strong {
    font-size: 1rem;
  }
  .demo-hub-page .landscape-brand small {
    font-size: 0.4rem;
  }
  .demo-hub-page .landscape-quote-link {
    padding: 0.8rem;
    font-size: 0.48rem;
  }
  .demo-hub-page .landscape-hero,
  .demo-hub-page .landscape-hero__copy {
    min-height: 52rem;
  }
  .demo-hub-page .landscape-hero__copy {
    width: 100%;
    padding: 4rem 1.25rem 12rem;
  }
  .demo-hub-page .landscape-hero__copy h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }
  .demo-hub-page .landscape-hero > aside {
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
  }
  .demo-hub-page .landscape-intro,
  .demo-hub-page .landscape-services,
  .demo-hub-page .landscape-work {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .landscape-intro h3 {
    font-size: clamp(3.5rem, 16vw, 5.4rem);
  }
  .demo-hub-page .landscape-intro > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .landscape-intro figure,
  .demo-hub-page .landscape-intro figure:nth-child(2) {
    width: calc(50% - 0.5rem);
    transform: none;
  }
  .demo-hub-page .landscape-intro figure:last-child {
    width: 70%;
  }
  .demo-hub-page .landscape-heading {
    gap: 1.25rem;
  }
  .demo-hub-page .landscape-heading h3 {
    font-size: clamp(3.8rem, 17vw, 5.7rem);
  }
  .demo-hub-page .landscape-service-list {
    flex-direction: column;
  }
  .demo-hub-page .landscape-service-list article,
  .demo-hub-page .landscape-service-list article:last-child {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .landscape-service-list article figure,
  .demo-hub-page .landscape-service-list article > div,
  .demo-hub-page .landscape-service-list article:last-child figure,
  .demo-hub-page .landscape-service-list article:last-child > div {
    width: 100%;
  }
  .demo-hub-page .landscape-work > header h3,
  .demo-hub-page .landscape-why h3,
  .demo-hub-page .landscape-quote header h3,
  .demo-hub-page .landscape-area h3 {
    font-size: clamp(3.8rem, 17vw, 5.7rem);
  }
  .demo-hub-page .landscape-comparison {
    height: 32rem;
    min-height: 0;
  }
  .demo-hub-page .landscape-project-strip {
    flex-direction: column;
  }
  .demo-hub-page .landscape-project-strip figure {
    width: 100%;
  }
  .demo-hub-page .landscape-why > div:first-child,
  .demo-hub-page .landscape-promises,
  .demo-hub-page .landscape-quote > form,
  .demo-hub-page .landscape-area > div {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .landscape-why > div:first-child figure {
    width: 100%;
  }
  .demo-hub-page .landscape-quote__visual,
  .demo-hub-page .landscape-area > figure {
    min-height: 32rem;
  }
  .demo-hub-page .landscape-quote__visual > div {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
  }
  .demo-hub-page .landscape-area form {
    flex-direction: column;
  }
  .demo-hub-page .landscape-area form input,
  .demo-hub-page .landscape-area form button {
    width: 100%;
  }
  .demo-hub-page .landscape-final,
  .demo-hub-page .landscape-final > div {
    min-height: 44rem;
  }
  .demo-hub-page .landscape-final > div h3 {
    font-size: clamp(4.2rem, 18vw, 6.2rem);
  }
  .demo-hub-page .landscape-footer {
    flex-direction: column;
  }
  .demo-hub-page .landscape-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .cleaning-nav {
    min-height: 5rem;
    padding: 0 1rem;
  }
  .demo-hub-page .cleaning-brand {
    min-width: 8rem;
  }
  .demo-hub-page .cleaning-brand span {
    font-size: 0.9rem;
  }
  .demo-hub-page .cleaning-brand strong {
    font-size: 1rem;
  }
  .demo-hub-page .cleaning-nav__quote {
    padding: 0.8rem;
    font-size: 0.48rem;
  }
  .demo-hub-page .cleaning-hero__copy,
  .demo-hub-page .cleaning-quote__intro,
  .demo-hub-page .cleaning-quote > form,
  .demo-hub-page .cleaning-process__steps,
  .demo-hub-page .cleaning-area > div {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .cleaning-hero__copy {
    min-height: 38rem;
  }
  .demo-hub-page .cleaning-hero__copy h2 {
    font-size: clamp(4.3rem, 20vw, 6.5rem);
  }
  .demo-hub-page .cleaning-hero > figure {
    min-height: 33rem;
  }
  .demo-hub-page .cleaning-hero > aside {
    right: 1rem;
    bottom: 1rem;
    width: calc(100% - 2rem);
  }
  .demo-hub-page .cleaning-trust {
    flex-direction: column;
    gap: 0.7rem;
    padding: 2rem 1rem;
  }
  .demo-hub-page .cleaning-trust i {
    display: none;
  }
  .demo-hub-page .cleaning-services,
  .demo-hub-page .cleaning-included,
  .demo-hub-page .cleaning-reviews {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .cleaning-heading {
    gap: 1.25rem;
  }
  .demo-hub-page .cleaning-heading h3 {
    font-size: clamp(3.8rem, 17vw, 5.7rem);
  }
  .demo-hub-page .cleaning-service-list {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-service-list article,
  .demo-hub-page .cleaning-service-list article:last-child {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .cleaning-service-list article figure,
  .demo-hub-page .cleaning-service-list article > div,
  .demo-hub-page .cleaning-service-list article:last-child figure,
  .demo-hub-page .cleaning-service-list article:last-child > div {
    width: 100%;
  }
  .demo-hub-page .cleaning-quote__intro figure {
    width: 100%;
  }
  .demo-hub-page .cleaning-quote > form > div {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-quote > form > div label {
    width: 100%;
  }
  .demo-hub-page .cleaning-quote > form fieldset {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-quote > form fieldset label {
    width: 100%;
  }
  .demo-hub-page .cleaning-included__content > figure,
  .demo-hub-page .cleaning-process__visual,
  .demo-hub-page .cleaning-area > figure {
    min-height: 32rem;
  }
  .demo-hub-page .cleaning-checklist {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-checklist article {
    width: 100%;
    min-height: 13rem;
    border-right: 0 !important;
  }
  .demo-hub-page .cleaning-process__visual > div {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
  }
  .demo-hub-page .cleaning-process__steps h3,
  .demo-hub-page .cleaning-area h3 {
    font-size: clamp(3.8rem, 17vw, 5.7rem);
  }
  .demo-hub-page .cleaning-reviews > header h3 {
    font-size: clamp(3.8rem, 17vw, 5.7rem);
  }
  .demo-hub-page .cleaning-reviews > div {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-reviews > div article,
  .demo-hub-page .cleaning-reviews > div figure {
    width: 100%;
  }
  .demo-hub-page .cleaning-area form {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-area form input,
  .demo-hub-page .cleaning-area form button {
    width: 100%;
  }
  .demo-hub-page .cleaning-final,
  .demo-hub-page .cleaning-final > div {
    min-height: 44rem;
  }
  .demo-hub-page .cleaning-final > div h3 {
    font-size: clamp(4.2rem, 18vw, 6.2rem);
  }
  .demo-hub-page .cleaning-footer {
    flex-direction: column;
  }
  .demo-hub-page .cleaning-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .contractor-nav {
    min-height: 5rem;
    padding: 0 1rem;
  }
  .demo-hub-page .contractor-brand {
    min-width: 10rem;
  }
  .demo-hub-page .contractor-brand > span {
    width: 2.1rem;
    height: 2.1rem;
    flex-basis: 2.1rem;
  }
  .demo-hub-page .contractor-brand strong {
    font-size: 1rem;
  }
  .demo-hub-page .contractor-brand small {
    padding-left: 2.75rem;
    font-size: 0.4rem;
  }
  .demo-hub-page .contractor-quote-link {
    padding: 0.8rem;
    font-size: 0.48rem;
  }
  .demo-hub-page .contractor-hero__copy {
    min-height: 41rem;
    padding: 4rem 1.25rem 9rem;
  }
  .demo-hub-page .contractor-hero__copy h2 {
    font-size: clamp(4rem, 17vw, 6rem);
  }
  .demo-hub-page .contractor-hero__copy > small {
    flex-wrap: wrap;
  }
  .demo-hub-page .contractor-hero > figure {
    min-height: 31rem;
  }
  .demo-hub-page .contractor-quick-form {
    width: calc(100% - 2rem);
    padding: 1.25rem;
  }
  .demo-hub-page .contractor-quick-form > div {
    flex-direction: column;
  }
  .demo-hub-page .contractor-quick-form > div label {
    width: 100%;
  }
  .demo-hub-page .contractor-trust {
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem 1rem;
  }
  .demo-hub-page .contractor-trust i {
    display: none;
  }
  .demo-hub-page .contractor-services,
  .demo-hub-page .contractor-work,
  .demo-hub-page .contractor-process {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .contractor-heading h3,
  .demo-hub-page .contractor-process > header h3,
  .demo-hub-page .contractor-pricing h3,
  .demo-hub-page .contractor-area h3 {
    font-size: clamp(3.6rem, 16vw, 5.5rem);
  }
  .demo-hub-page .contractor-service-list {
    flex-direction: column;
  }
  .demo-hub-page .contractor-service-list article,
  .demo-hub-page .contractor-service-list article:last-child {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .contractor-service-list article figure,
  .demo-hub-page .contractor-service-list article > div,
  .demo-hub-page .contractor-service-list article:last-child figure,
  .demo-hub-page .contractor-service-list article:last-child > div {
    width: 100%;
  }
  .demo-hub-page .contractor-projects {
    flex-direction: column;
  }
  .demo-hub-page .contractor-project,
  .demo-hub-page .contractor-project--large,
  .demo-hub-page .contractor-project--wide {
    width: 100%;
    min-height: 29rem;
  }
  .demo-hub-page .contractor-process > div {
    flex-direction: column;
  }
  .demo-hub-page .contractor-process article {
    width: 100%;
    min-height: 0;
    padding: 1.5rem 0;
    border-right: 0 !important;
  }
  .demo-hub-page .contractor-pricing figure,
  .demo-hub-page .contractor-area > figure {
    min-height: 32rem;
  }
  .demo-hub-page .contractor-pricing > div,
  .demo-hub-page .contractor-area > div {
    min-height: 35rem;
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .contractor-area figcaption {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
  }
  .demo-hub-page .contractor-area form {
    flex-direction: column;
  }
  .demo-hub-page .contractor-area form button {
    width: 100%;
  }
  .demo-hub-page .contractor-final,
  .demo-hub-page .contractor-final > div {
    min-height: 43rem;
  }
  .demo-hub-page .contractor-final > div {
    width: 100%;
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .contractor-final > div h3 {
    font-size: clamp(4rem, 17vw, 6rem);
  }
  .demo-hub-page .contractor-footer {
    flex-direction: column;
  }
  .demo-hub-page .contractor-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .boutique-hero__copy,
  .demo-hub-page .boutique-hero > figure,
  .demo-hub-page .boutique-heading > p,
  .demo-hub-page .boutique-heading h3,
  .demo-hub-page .boutique-heading > span,
  .demo-hub-page .boutique-editorial figure,
  .demo-hub-page .boutique-editorial figure:last-child,
  .demo-hub-page .boutique-editorial > div,
  .demo-hub-page .boutique-story > div:first-child,
  .demo-hub-page .boutique-story__images,
  .demo-hub-page .boutique-store__visual,
  .demo-hub-page .boutique-store__details,
  .demo-hub-page .boutique-newsletter > div,
  .demo-hub-page .boutique-newsletter form {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .boutique-hero__copy,
  .demo-hub-page .boutique-hero > figure {
    min-height: 40rem;
  }
  .demo-hub-page .boutique-heading > p {
    flex: 0 0 auto;
  }
  .demo-hub-page .boutique-new__categories {
    flex-wrap: wrap;
  }
  .demo-hub-page .boutique-new__categories article {
    width: calc(50% - 0.5rem);
  }
  .demo-hub-page .boutique-new__categories article:last-child {
    width: 100%;
    flex-direction: row;
  }
  .demo-hub-page .boutique-new__categories article:last-child figure,
  .demo-hub-page .boutique-new__categories article:last-child > div {
    width: 50%;
  }
  .demo-hub-page .boutique-shop > header {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .boutique-filters {
    justify-content: flex-start;
  }
  .demo-hub-page .boutique-product,
  .demo-hub-page .boutique-product--wide {
    width: calc(50% - 1rem);
  }
  .demo-hub-page .boutique-product figure,
  .demo-hub-page .boutique-product--wide figure {
    aspect-ratio: 0.9;
  }
  .demo-hub-page .boutique-editorial figure,
  .demo-hub-page .boutique-editorial figure:last-child,
  .demo-hub-page .boutique-story__images,
  .demo-hub-page .boutique-store__visual {
    min-height: 42rem;
  }
  .demo-hub-page .boutique-editorial > div {
    min-height: 34rem;
  }
  .demo-hub-page .boutique-footer {
    flex-wrap: wrap;
  }
  .demo-hub-page .boutique-footer > div:first-child {
    width: 100%;
  }}@media (max-width: 560px) {
  .demo-hub-page .demo-hub__tab {
    width: 100%;
  }
  .demo-hub-page .demo-site__bar,
  .demo-hub-page .demo-site__section {
    width: calc(100% - 2rem);
  }
  .demo-hub-page .demo-site__proof {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .demo-hub-page .demo-site__final {
    padding: 4rem 1rem;
  }
  .demo-hub-page .demo-conversion__form > label {
    width: 100%;
  }
  .demo-hub-page .pottery-material-strip {
    flex-wrap: wrap;
  }
  .demo-hub-page .pottery-material-strip i {
    display: none;
  }
  .demo-hub-page .pottery-products {
    flex-direction: column;
  }
  .demo-hub-page .pottery-shop-card {
    width: 100%;
    min-width: 0;
    flex-basis: 100%;
  }
  .demo-hub-page .pottery-commerce-notes {
    flex-direction: column;
  }
  .demo-hub-page .pottery-commerce-notes article {
    width: 100%;
    flex-basis: auto;
    border-right: 0;
  }
  .demo-hub-page .pottery-detail {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: none;
    transform: translateY(2rem);
  }
  .demo-hub-page .pottery-detail.is-open {
    transform: translateY(0);
  }
  .demo-hub-page .pottery-detail > figure {
    min-height: 20rem;
  }
  .demo-hub-page .pottery-detail__copy {
    padding: 2rem 1.25rem 3rem;
  }
  .demo-hub-page .pottery-product,
  .demo-hub-page .pottery-product--wide {
    width: 100%;
    margin-top: 0;
    flex-basis: auto;
  }
  .demo-hub-page .pottery-product figure,
  .demo-hub-page .pottery-product--wide figure {
    aspect-ratio: 0.9;
  }
  .demo-hub-page .pottery-editorial {
    flex-direction: column;
  }
  .demo-hub-page .pottery-editorial .pottery-editorial__large,
  .demo-hub-page .pottery-editorial__statement,
  .demo-hub-page .pottery-editorial figure:nth-of-type(n) {
    width: 100%;
  }
  .demo-hub-page .pottery-editorial__statement {
    min-height: 22rem;
    padding: 2rem;
  }
  .demo-hub-page .pottery-commission__visuals .is-main {
    width: 100%;
  }
  .demo-hub-page .pottery-commission__visuals .is-small {
    right: 1rem;
    bottom: 1rem;
    width: 46%;
  }
  .demo-hub-page .pottery-about__images {
    flex-direction: column;
  }
  .demo-hub-page .pottery-about__images figure,
  .demo-hub-page .pottery-about__images figure:first-child {
    width: 100%;
    min-height: 25rem;
  }
  .demo-hub-page .pottery-find__gallery {
    flex-direction: column;
  }
  .demo-hub-page .pottery-find__gallery figure,
  .demo-hub-page .pottery-find__gallery figure:nth-child(2) {
    width: 100%;
    margin-top: 0;
  }
  .demo-hub-page .pottery-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .pottery-footer strong {
    margin-right: 0;
  }
  .demo-hub-page .photo-nav__enquire {
    font-size: 0.52rem;
  }
  .demo-hub-page .photo-hero__copy {
    min-height: 36rem;
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .photo-hero__copy h2 {
    font-size: clamp(3.4rem, 16vw, 5rem);
  }
  .demo-hub-page .photo-hero__main {
    min-height: 31rem;
  }
  .demo-hub-page .photo-hero__detail {
    right: 1rem;
    bottom: 27rem;
    width: 8rem;
  }
  .demo-hub-page .photo-manifesto {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .demo-hub-page .photo-manifesto__mosaic {
    gap: 0.5rem;
  }
  .demo-hub-page .photo-manifesto__mosaic figure,
  .demo-hub-page .photo-manifesto__mosaic figure:nth-child(2),
  .demo-hub-page .photo-manifesto__mosaic figure:nth-child(3),
  .demo-hub-page .photo-manifesto__mosaic figure:nth-child(4) {
    width: calc(50% - 0.25rem);
  }
  .demo-hub-page .photo-session-list article > span {
    width: 2rem;
    flex-basis: 2rem;
  }
  .demo-hub-page .photo-session-list article > div {
    width: calc(100% - 3rem);
  }
  .demo-hub-page .photo-session-list article figure {
    width: 100%;
    height: 18rem;
    margin-left: 0;
  }
  .demo-hub-page .photo-session-list article > a {
    margin-left: auto;
  }
  .demo-hub-page .photo-story,
  .demo-hub-page .photo-story--lead,
  .demo-hub-page .photo-story--wide {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .photo-story figure,
  .demo-hub-page .photo-story--lead figure,
  .demo-hub-page .photo-story--wide figure {
    width: 100%;
    aspect-ratio: 0.9;
  }
  .demo-hub-page .photo-story > div,
  .demo-hub-page .photo-story--lead > div,
  .demo-hub-page .photo-story--wide > div {
    width: 100%;
    padding: 1rem 0 2rem;
  }
  .demo-hub-page .photo-experience__copy,
  .demo-hub-page .photo-enquire form {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .photo-experience__images {
    min-height: 34rem;
  }
  .demo-hub-page .photo-pricing__options {
    flex-direction: column;
  }
  .demo-hub-page .photo-pricing__options article {
    width: 100%;
  }
  .demo-hub-page .photo-pricing__options article + article {
    border-top: 0;
    border-left: 1px solid rgba(238, 237, 231, 0.35);
  }
  .demo-hub-page .photo-enquire form label {
    width: 100%;
  }
  .demo-hub-page .photo-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .jewel-nav {
    gap: 0.75rem;
  }
  .demo-hub-page .jewel-nav__brand {
    font-size: 1.1rem;
  }
  .demo-hub-page .jewel-nav__tools button:first-child {
    display: none;
  }
  .demo-hub-page .jewel-hero,
  .demo-hub-page .jewel-hero__copy {
    min-height: 43rem;
  }
  .demo-hub-page .jewel-hero__copy {
    width: 100%;
    padding: 5rem 1.25rem;
  }
  .demo-hub-page .jewel-hero__copy h2 {
    font-size: clamp(4rem, 19vw, 6rem);
  }
  .demo-hub-page .jewel-intro {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
  .demo-hub-page .jewel-intro h3 {
    font-size: clamp(3.5rem, 16vw, 5.5rem);
  }
  .demo-hub-page .jewel-products {
    flex-direction: column;
  }
  .demo-hub-page .jewel-products article {
    width: 100%;
  }
  .demo-hub-page .jewel-editorial__portrait,
  .demo-hub-page .jewel-editorial__detail {
    min-height: 31rem;
  }
  .demo-hub-page .jewel-editorial__copy,
  .demo-hub-page .jewel-custom__copy,
  .demo-hub-page .jewel-custom form,
  .demo-hub-page .jewel-local__content > div {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .jewel-process__images {
    min-height: 34rem;
  }
  .demo-hub-page .jewel-process__steps article {
    gap: 1rem;
  }
  .demo-hub-page .jewel-process__steps article span {
    width: 4rem;
    flex-basis: 4rem;
  }
  .demo-hub-page .jewel-custom form label {
    width: 100%;
  }
  .demo-hub-page .jewel-custom__copy figure {
    width: 78%;
  }
  .demo-hub-page .jewel-final,
  .demo-hub-page .jewel-final > div {
    min-height: 40rem;
  }
  .demo-hub-page .jewel-footer {
    flex-direction: column;
  }
  .demo-hub-page .jewel-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .bake-nav__brand {
    font-size: 1.3rem;
  }
  .demo-hub-page .bake-hero {
    margin: 0 0.75rem;
    border-radius: 1rem;
  }
  .demo-hub-page .bake-hero__copy {
    min-height: 37rem;
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .bake-hero__copy h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }
  .demo-hub-page .bake-hero > figure {
    min-height: 30rem;
  }
  .demo-hub-page .bake-heading h3 {
    font-size: clamp(3.7rem, 16vw, 5.5rem);
  }
  .demo-hub-page .bake-week__categories {
    flex-direction: column;
  }
  .demo-hub-page .bake-week__categories article,
  .demo-hub-page .bake-week__categories article:last-child {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .bake-week__categories article figure,
  .demo-hub-page .bake-week__categories article > div,
  .demo-hub-page .bake-week__categories article:last-child figure,
  .demo-hub-page .bake-week__categories article:last-child > div {
    width: 100%;
  }
  .demo-hub-page .bake-products {
    flex-direction: column;
  }
  .demo-hub-page .bake-product,
  .demo-hub-page .bake-product--feature {
    width: 100%;
  }
  .demo-hub-page .bake-product figure,
  .demo-hub-page .bake-product--feature figure {
    aspect-ratio: 1;
  }
  .demo-hub-page .bake-box__copy,
  .demo-hub-page .bake-cakes form,
  .demo-hub-page .bake-details > div,
  .demo-hub-page .bake-final > div {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .bake-box__images {
    min-height: 34rem;
  }
  .demo-hub-page .bake-box__images figure {
    width: 50%;
  }
  .demo-hub-page .bake-cakes form label {
    width: 100%;
  }
  .demo-hub-page .bake-ordering > div {
    flex-direction: column;
  }
  .demo-hub-page .bake-ordering > div article,
  .demo-hub-page .bake-ordering > div article:last-child {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 241, 215, 0.45);
  }
  .demo-hub-page .bake-final > div h3 {
    font-size: clamp(4rem, 17vw, 6rem);
  }
  .demo-hub-page .bake-footer {
    flex-direction: column;
  }
  .demo-hub-page .bake-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .flower-nav__brand {
    left: 1.25rem;
    transform: none;
    font-size: 1.2rem;
  }
  .demo-hub-page .flower-hero,
  .demo-hub-page .flower-hero__copy {
    min-height: 47rem;
  }
  .demo-hub-page .flower-hero__copy {
    width: 100%;
    padding: 5rem 1.25rem;
  }
  .demo-hub-page .flower-hero__copy h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }
  .demo-hub-page .flower-heading h3 {
    font-size: clamp(3.7rem, 16vw, 5.5rem);
  }
  .demo-hub-page .flower-occasions {
    flex-direction: column;
  }
  .demo-hub-page .flower-occasions article,
  .demo-hub-page .flower-occasions article:last-child {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .flower-occasions article figure,
  .demo-hub-page .flower-occasions article > div,
  .demo-hub-page .flower-occasions article:last-child figure,
  .demo-hub-page .flower-occasions article:last-child > div {
    width: 100%;
  }
  .demo-hub-page .flower-products {
    flex-direction: column;
  }
  .demo-hub-page .flower-products article {
    width: 100%;
  }
  .demo-hub-page .flower-editorial .flower-editorial__large,
  .demo-hub-page .flower-editorial > figure:last-child {
    min-height: 31rem;
  }
  .demo-hub-page .flower-editorial > div,
  .demo-hub-page .flower-style__copy,
  .demo-hub-page .flower-events form,
  .demo-hub-page .flower-delivery__body > div {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .flower-style__images,
  .demo-hub-page .flower-events__visual,
  .demo-hub-page .flower-delivery__body > figure {
    min-height: 34rem;
  }
  .demo-hub-page .flower-events form label {
    width: 100%;
  }
  .demo-hub-page .flower-delivery__body form {
    flex-direction: column;
  }
  .demo-hub-page .flower-delivery__body form button {
    width: 100%;
  }
  .demo-hub-page .flower-delivery__body > div > div article {
    flex-direction: column;
    gap: 0.5rem;
  }
  .demo-hub-page .flower-delivery__body > div > div article strong {
    width: 100%;
    flex-basis: auto;
  }
  .demo-hub-page .flower-final,
  .demo-hub-page .flower-final > div {
    min-height: 43rem;
  }
  .demo-hub-page .flower-final > div h3 {
    font-size: clamp(4rem, 17vw, 6rem);
  }
  .demo-hub-page .flower-footer {
    flex-direction: column;
  }
  .demo-hub-page .flower-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .artist-nav__brand {
    font-size: 1.2rem;
  }
  .demo-hub-page .artist-hero__copy {
    min-height: 39rem;
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .artist-hero__copy h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }
  .demo-hub-page .artist-hero__gallery {
    min-height: 35rem;
  }
  .demo-hub-page .artist-hero__gallery figure.is-main {
    right: 12%;
  }
  .demo-hub-page .artist-hero__gallery figure:nth-child(2),
  .demo-hub-page .artist-hero__gallery figure:nth-child(3) {
    right: 1rem;
  }
  .demo-hub-page .artist-statement,
  .demo-hub-page .artist-editorial > div,
  .demo-hub-page .artist-commissions__intro,
  .demo-hub-page .artist-commissions form,
  .demo-hub-page .artist-about__copy,
  .demo-hub-page .artist-final > div {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .artist-work__types {
    flex-direction: column;
  }
  .demo-hub-page .artist-work__types article,
  .demo-hub-page .artist-work__types article:last-child {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .artist-work__types article figure,
  .demo-hub-page .artist-work__types article > div,
  .demo-hub-page .artist-work__types article:last-child figure,
  .demo-hub-page .artist-work__types article:last-child > div {
    width: 100%;
  }
  .demo-hub-page .artist-products {
    flex-direction: column;
  }
  .demo-hub-page .artist-product,
  .demo-hub-page .artist-product--large {
    width: 100%;
  }
  .demo-hub-page .artist-editorial figure,
  .demo-hub-page .artist-editorial figure:last-child,
  .demo-hub-page .artist-about__portrait,
  .demo-hub-page .artist-final figure {
    min-height: 32rem;
  }
  .demo-hub-page .artist-commissions form label {
    width: 100%;
  }
  .demo-hub-page .artist-commissions__intro figure {
    width: 88%;
  }
  .demo-hub-page .artist-final > div h3,
  .demo-hub-page .artist-about__copy h3 {
    font-size: clamp(4rem, 17vw, 6rem);
  }
  .demo-hub-page .artist-footer {
    flex-direction: column;
  }
  .demo-hub-page .artist-footer > div:first-child {
    margin-right: 0;
  }
  .demo-hub-page .boutique-hero__copy,
  .demo-hub-page .boutique-new,
  .demo-hub-page .boutique-shop,
  .demo-hub-page .boutique-editorial > div,
  .demo-hub-page .boutique-story > div:first-child,
  .demo-hub-page .boutique-store__details,
  .demo-hub-page .boutique-newsletter {
    padding: 4rem 1.25rem;
  }
  .demo-hub-page .boutique-hero__copy {
    min-height: 37rem;
  }
  .demo-hub-page .boutique-hero__copy h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }
  .demo-hub-page .boutique-hero > figure {
    min-height: 32rem;
  }
  .demo-hub-page .boutique-heading {
    gap: 1.25rem;
  }
  .demo-hub-page .boutique-heading h3,
  .demo-hub-page .boutique-shop > header h3 {
    font-size: clamp(3.6rem, 16vw, 5.5rem);
  }
  .demo-hub-page .boutique-new__categories {
    flex-direction: column;
  }
  .demo-hub-page .boutique-new__categories article,
  .demo-hub-page .boutique-new__categories article:last-child {
    width: 100%;
    flex-direction: column;
  }
  .demo-hub-page .boutique-new__categories article figure,
  .demo-hub-page .boutique-new__categories article > div,
  .demo-hub-page .boutique-new__categories article:last-child figure,
  .demo-hub-page .boutique-new__categories article:last-child > div {
    width: 100%;
  }
  .demo-hub-page .boutique-products {
    flex-direction: column;
  }
  .demo-hub-page .boutique-product,
  .demo-hub-page .boutique-product--wide {
    width: 100%;
  }
  .demo-hub-page .boutique-editorial figure,
  .demo-hub-page .boutique-editorial figure:last-child,
  .demo-hub-page .boutique-story__images,
  .demo-hub-page .boutique-store__visual {
    min-height: 32rem;
  }
  .demo-hub-page .boutique-story__images figure:last-child {
    right: 1rem;
    bottom: 1rem;
  }
  .demo-hub-page .boutique-store__visual > div {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
  }
  .demo-hub-page .boutique-newsletter form {
    flex-direction: column;
  }
  .demo-hub-page .boutique-newsletter button {
    width: 100%;
  }
  .demo-hub-page .boutique-final,
  .demo-hub-page .boutique-final > div {
    min-height: 42rem;
  }
  .demo-hub-page .boutique-final > div h3 {
    font-size: clamp(4rem, 18vw, 6rem);
  }
  .demo-hub-page .boutique-footer {
    flex-direction: column;
  }
  .demo-hub-page .boutique-footer > div:first-child {
    margin-right: 0;
  }}
/* Final page-by-page audit. These rules target every rendered demo section,
   including the creator and local-service templates that do not use <main>. */
.demo-hub-page .demo-site:not([class*=demo-site--]) section {
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100vh;
  margin: 0 !important;
  padding: clamp(1.75rem, 3vw, 3rem) clamp(1.25rem, 4vw, 4rem) !important;
  overflow: hidden;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section button,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [type=button],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [type=submit] {
  display: inline-flex;
  width: auto;
  height: auto !important;
  min-height: 42px !important;
  padding: 0.68rem 1rem !important;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
  text-align: center;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section button::before,
.demo-hub-page .demo-site:not([class*=demo-site--]) section button::after {
  display: none !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section a {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section figure {
  height: auto !important;
  min-height: 0 !important;
  max-height: 50vh !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section article figure {
  max-height: 26vh !important;
  aspect-ratio: 4/3 !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section figure img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section form {
  padding: clamp(1.25rem, 2.5vw, 2rem) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section input,
.demo-hub-page .demo-site:not([class*=demo-site--]) section select {
  min-height: 42px;
  padding-block: 0.55rem !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section textarea {
  min-height: 86px;
  max-height: 120px;
}

.demo-hub-page .pottery-hero,
.demo-hub-page .photo-hero,
.demo-hub-page .jewel-hero,
.demo-hub-page .bake-hero,
.demo-hub-page .flower-hero,
.demo-hub-page .artist-hero,
.demo-hub-page .boutique-hero,
.demo-hub-page .contractor-hero,
.demo-hub-page .cleaning-hero,
.demo-hub-page .landscape-hero,
.demo-hub-page .plumbing-hero,
.demo-hub-page .auto-hero,
.demo-hub-page .grooming-hero,
.demo-hub-page .salon-hero,
.demo-hub-page .consultant-hero,
.demo-hub-page .coach-hero,
.demo-hub-page .tutor-hero,
.demo-hub-page .lawyer-hero,
.demo-hub-page .designer-hero,
.demo-hub-page .bookkeeper-hero {
  max-height: 88vh !important;
}

.demo-hub-page .pottery-hero figure,
.demo-hub-page .photo-hero figure,
.demo-hub-page .jewel-hero figure,
.demo-hub-page .bake-hero figure,
.demo-hub-page .flower-hero figure,
.demo-hub-page .artist-hero figure,
.demo-hub-page .boutique-hero figure,
.demo-hub-page .contractor-hero figure,
.demo-hub-page .cleaning-hero figure,
.demo-hub-page .landscape-hero figure,
.demo-hub-page .plumbing-hero figure,
.demo-hub-page .auto-hero figure,
.demo-hub-page .grooming-hero figure,
.demo-hub-page .salon-hero figure,
.demo-hub-page .consultant-hero figure,
.demo-hub-page .coach-hero figure,
.demo-hub-page .tutor-hero figure,
.demo-hub-page .lawyer-hero figure,
.demo-hub-page .designer-hero figure,
.demo-hub-page .bookkeeper-hero figure {
  max-height: 66vh !important;
}

.demo-hub-page {
  /* 01 — Pottery: compact catalogue, editorial and studio story. */
}

.demo-hub-page .demo-site--pottery .pottery-collection,
.demo-hub-page .demo-site--pottery .pottery-shop,
.demo-hub-page .demo-site--pottery .pottery-editorial,
.demo-hub-page .demo-site--pottery .pottery-about,
.demo-hub-page .demo-site--pottery .pottery-find {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--pottery .pottery-products,
.demo-hub-page .demo-site--pottery .pottery-shop__catalogue {
  gap: 0.85rem;
}

.demo-hub-page .demo-site--pottery .pottery-product figure,
.demo-hub-page .demo-site--pottery .pottery-shop-card figure {
  max-height: 190px !important;
}

.demo-hub-page .demo-site--pottery .pottery-editorial__large,
.demo-hub-page .demo-site--pottery .pottery-about__images figure,
.demo-hub-page .demo-site--pottery .pottery-find__gallery figure {
  max-height: 38vh !important;
}

.demo-hub-page .demo-site--pottery .pottery-commerce-notes {
  padding-block: 1.4rem !important;
}

.demo-hub-page .demo-site--pottery .pottery-actions,
.demo-hub-page .demo-site--pottery .pottery-product__actions,
.demo-hub-page .demo-site--pottery .pottery-shop-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.demo-hub-page {
  /* 02 — Photographer: image-led, but no image exceeds its narrative value. */
}

.demo-hub-page .demo-site--photographer .photo-manifesto,
.demo-hub-page .demo-site--photographer .photo-sessions,
.demo-hub-page .demo-site--photographer .photo-stories,
.demo-hub-page .demo-site--photographer .photo-experience,
.demo-hub-page .demo-site--photographer .photo-pricing,
.demo-hub-page .demo-site--photographer .photo-faq,
.demo-hub-page .demo-site--photographer .photo-enquire {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--photographer .photo-manifesto__mosaic figure,
.demo-hub-page .demo-site--photographer .photo-session-list figure,
.demo-hub-page .demo-site--photographer .photo-story figure,
.demo-hub-page .demo-site--photographer .photo-experience__images figure {
  max-height: 230px !important;
}

.demo-hub-page .demo-site--photographer .photo-story--lead figure,
.demo-hub-page .demo-site--photographer .photo-story--wide figure {
  max-height: 300px !important;
}

.demo-hub-page .demo-site--photographer .photo-pricing__options,
.demo-hub-page .demo-site--photographer .photo-faq__items {
  gap: 0.85rem;
}

.demo-hub-page {
  /* 03 — Jewelry: the former empty manifesto is now a compact making guide. */
}

.demo-hub-page .demo-site--jewelry .jewel-intro {
  display: flex;
  padding-block: 2rem !important;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.demo-hub-page .demo-site--jewelry .jewel-intro__lead {
  width: 48%;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes {
  display: flex;
  width: 52%;
  flex-direction: column;
  border-top: 1px solid currentColor;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes article {
  display: flex;
  padding: 0.8rem 0;
  gap: 1rem;
  border-bottom: 1px solid currentColor;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes b {
  width: 30%;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes span {
  width: 70%;
}

.demo-hub-page .demo-site--jewelry .jewel-shop,
.demo-hub-page .demo-site--jewelry .jewel-editorial,
.demo-hub-page .demo-site--jewelry .jewel-process,
.demo-hub-page .demo-site--jewelry .jewel-custom,
.demo-hub-page .demo-site--jewelry .jewel-local {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--jewelry .jewel-products figure {
  max-height: 180px !important;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial figure,
.demo-hub-page .demo-site--jewelry .jewel-process__images figure,
.demo-hub-page .demo-site--jewelry .jewel-custom figure,
.demo-hub-page .demo-site--jewelry .jewel-local figure {
  max-height: 36vh !important;
}

.demo-hub-page {
  /* 04 — Bakery: product cards stay shoppable, not poster-sized. */
}

.demo-hub-page .demo-site--bakery .bake-week,
.demo-hub-page .demo-site--bakery .bake-shop,
.demo-hub-page .demo-site--bakery .bake-box,
.demo-hub-page .demo-site--bakery .bake-cakes,
.demo-hub-page .demo-site--bakery .bake-ordering,
.demo-hub-page .demo-site--bakery .bake-details {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--bakery .bake-product figure,
.demo-hub-page .demo-site--bakery .bake-week__categories figure {
  max-height: 175px !important;
}

.demo-hub-page .demo-site--bakery .bake-box__images figure,
.demo-hub-page .demo-site--bakery .bake-cakes__visual {
  max-height: 36vh !important;
}

.demo-hub-page .demo-site--bakery .bake-filters,
.demo-hub-page .demo-site--bakery .bake-week__categories {
  gap: 0.7rem;
}

.demo-hub-page {
  /* 05 — Florist: bouquet imagery is cropped to a compact retail rhythm. */
}

.demo-hub-page .demo-site--florist .flower-order,
.demo-hub-page .demo-site--florist .flower-shop,
.demo-hub-page .demo-site--florist .flower-editorial,
.demo-hub-page .demo-site--florist .flower-style,
.demo-hub-page .demo-site--florist .flower-events,
.demo-hub-page .demo-site--florist .flower-delivery {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--florist .flower-products figure,
.demo-hub-page .demo-site--florist .flower-occasions figure {
  max-height: 185px !important;
}

.demo-hub-page .demo-site--florist .flower-editorial__large,
.demo-hub-page .demo-site--florist .flower-style__images figure,
.demo-hub-page .demo-site--florist .flower-events__visual,
.demo-hub-page .demo-site--florist .flower-delivery figure {
  max-height: 36vh !important;
}

.demo-hub-page .demo-site--florist .flower-marquee {
  min-height: 44px;
  padding-block: 0.65rem !important;
}

.demo-hub-page {
  /* 06 — Artist: statement now combines work, routes and context. */
}

.demo-hub-page .demo-site--artist .artist-statement {
  display: flex;
  padding-block: 2rem !important;
  align-items: stretch;
  gap: 1rem;
}

.demo-hub-page .demo-site--artist .artist-statement__copy {
  width: 48%;
  padding-right: 1rem;
}

.demo-hub-page .demo-site--artist .artist-statement > figure {
  width: 24%;
  max-height: 280px !important;
  margin: 0;
}

.demo-hub-page .demo-site--artist .artist-statement__routes {
  display: flex;
  width: 28%;
  flex-direction: column;
  border-top: 1px solid currentColor;
}

.demo-hub-page .demo-site--artist .artist-statement__routes a {
  display: flex;
  padding: 0.8rem 0;
  flex-direction: column;
  border-bottom: 1px solid currentColor;
}

.demo-hub-page .demo-site--artist .artist-work,
.demo-hub-page .demo-site--artist .artist-originals,
.demo-hub-page .demo-site--artist .artist-editorial,
.demo-hub-page .demo-site--artist .artist-commissions,
.demo-hub-page .demo-site--artist .artist-about {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--artist .artist-work__types figure,
.demo-hub-page .demo-site--artist .artist-product figure {
  max-height: 185px !important;
}

.demo-hub-page .demo-site--artist .artist-editorial figure,
.demo-hub-page .demo-site--artist .artist-about figure,
.demo-hub-page .demo-site--artist .artist-commissions figure {
  max-height: 38vh !important;
}

.demo-hub-page {
  /* 07 — Boutique: collection cards and store imagery stay editorial but concise. */
}

.demo-hub-page .demo-site--boutique .boutique-new,
.demo-hub-page .demo-site--boutique .boutique-shop,
.demo-hub-page .demo-site--boutique .boutique-editorial,
.demo-hub-page .demo-site--boutique .boutique-story,
.demo-hub-page .demo-site--boutique .boutique-store,
.demo-hub-page .demo-site--boutique .boutique-newsletter {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--boutique .boutique-product figure,
.demo-hub-page .demo-site--boutique .boutique-new__categories figure {
  max-height: 190px !important;
}

.demo-hub-page .demo-site--boutique .boutique-editorial figure,
.demo-hub-page .demo-site--boutique .boutique-story__images figure,
.demo-hub-page .demo-site--boutique .boutique-store__visual {
  max-height: 38vh !important;
}

.demo-hub-page .demo-site--boutique .boutique-newsletter {
  min-height: 0 !important;
}

.demo-hub-page {
  /* 08 — Contractor: compact proof, service and estimate modules. */
}

.demo-hub-page .demo-site--contractor .contractor-services,
.demo-hub-page .demo-site--contractor .contractor-work,
.demo-hub-page .demo-site--contractor .contractor-process,
.demo-hub-page .demo-site--contractor .contractor-pricing,
.demo-hub-page .demo-site--contractor .contractor-area {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--contractor .contractor-project figure,
.demo-hub-page .demo-site--contractor .contractor-service-list figure {
  max-height: 195px !important;
}

.demo-hub-page .demo-site--contractor .contractor-quick-form {
  padding: 1.25rem !important;
}

.demo-hub-page .demo-site--contractor .contractor-trust {
  padding-block: 1rem !important;
}

.demo-hub-page {
  /* 09 — Cleaning: quote and checklist sections use their content height. */
}

.demo-hub-page .demo-site--cleaning .cleaning-services,
.demo-hub-page .demo-site--cleaning .cleaning-quote,
.demo-hub-page .demo-site--cleaning .cleaning-included,
.demo-hub-page .demo-site--cleaning .cleaning-process,
.demo-hub-page .demo-site--cleaning .cleaning-reviews,
.demo-hub-page .demo-site--cleaning .cleaning-area {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--cleaning .cleaning-service-list figure,
.demo-hub-page .demo-site--cleaning .cleaning-process__visual,
.demo-hub-page .demo-site--cleaning .cleaning-included figure {
  max-height: 240px !important;
}

.demo-hub-page .demo-site--cleaning .cleaning-checklist,
.demo-hub-page .demo-site--cleaning .cleaning-process__steps {
  gap: 0.7rem;
}

.demo-hub-page .demo-site--cleaning .cleaning-trust {
  padding-block: 1rem !important;
}

.demo-hub-page {
  /* 10 — Landscaping: project strips remain visual without becoming walls. */
}

.demo-hub-page .demo-site--landscaping .landscape-intro,
.demo-hub-page .demo-site--landscaping .landscape-services,
.demo-hub-page .demo-site--landscaping .landscape-work,
.demo-hub-page .demo-site--landscaping .landscape-why,
.demo-hub-page .demo-site--landscaping .landscape-quote,
.demo-hub-page .demo-site--landscaping .landscape-area {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--landscaping .landscape-intro figure,
.demo-hub-page .demo-site--landscaping .landscape-service-list figure,
.demo-hub-page .demo-site--landscaping .landscape-project-strip figure {
  max-height: 190px !important;
}

.demo-hub-page .demo-site--landscaping .landscape-comparison,
.demo-hub-page .demo-site--landscaping .landscape-quote__visual {
  max-height: 40vh !important;
}

.demo-hub-page .demo-site--landscaping .landscape-promises {
  gap: 0.75rem;
}

.demo-hub-page {
  /* 11 — Plumbing: service and emergency imagery is supporting, not dominant. */
}

.demo-hub-page .demo-site--plumbing .plumbing-services,
.demo-hub-page .demo-site--plumbing .plumbing-emergency,
.demo-hub-page .demo-site--plumbing .plumbing-request,
.demo-hub-page .demo-site--plumbing .plumbing-pricing,
.demo-hub-page .demo-site--plumbing .plumbing-reviews,
.demo-hub-page .demo-site--plumbing .plumbing-area {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--plumbing .plumbing-service-list figure,
.demo-hub-page .demo-site--plumbing .plumbing-hero__images figure {
  max-height: 210px !important;
}

.demo-hub-page .demo-site--plumbing .plumbing-emergency figure,
.demo-hub-page .demo-site--plumbing .plumbing-request figure {
  max-height: 34vh !important;
}

.demo-hub-page .demo-site--plumbing .plumbing-trust {
  padding-block: 1rem !important;
}

.demo-hub-page {
  /* 12 — Auto repair: vehicle images use wide crops and short service cards. */
}

.demo-hub-page .demo-site--auto .auto-services,
.demo-hub-page .demo-site--auto .auto-difference,
.demo-hub-page .demo-site--auto .auto-appointment,
.demo-hub-page .demo-site--auto .auto-reviews,
.demo-hub-page .demo-site--auto .auto-process {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--auto .auto-service figure {
  max-height: 180px !important;
  aspect-ratio: 16/9 !important;
}

.demo-hub-page .demo-site--auto .auto-difference__visual,
.demo-hub-page .demo-site--auto .auto-appointment figure {
  max-height: 36vh !important;
}

.demo-hub-page .demo-site--auto .auto-principles,
.demo-hub-page .demo-site--auto .auto-process > div {
  gap: 0.75rem;
}

.demo-hub-page {
  /* 13 — Pet grooming: compact service, pricing and booking modules. */
}

.demo-hub-page .demo-site--grooming .grooming-services,
.demo-hub-page .demo-site--grooming .grooming-pricing,
.demo-hub-page .demo-site--grooming .grooming-experience,
.demo-hub-page .demo-site--grooming .grooming-book,
.demo-hub-page .demo-site--grooming .grooming-gallery {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--grooming .grooming-service-list figure,
.demo-hub-page .demo-site--grooming .grooming-gallery figure {
  max-height: 190px !important;
}

.demo-hub-page .demo-site--grooming .grooming-experience__images figure,
.demo-hub-page .demo-site--grooming .grooming-book figure {
  max-height: 36vh !important;
}

.demo-hub-page .demo-site--grooming .grooming-ticker {
  min-height: 44px;
  padding-block: 0.65rem !important;
}

.demo-hub-page {
  /* 14 — Salon: portfolio, team and booking stay within a single-screen rhythm. */
}

.demo-hub-page .demo-site--salon .salon-services,
.demo-hub-page .demo-site--salon .salon-work,
.demo-hub-page .demo-site--salon .salon-team,
.demo-hub-page .demo-site--salon .salon-first-visit,
.demo-hub-page .demo-site--salon .salon-book {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--salon .salon-service-list figure,
.demo-hub-page .demo-site--salon .salon-work__gallery figure,
.demo-hub-page .demo-site--salon .salon-team figure {
  max-height: 190px !important;
}

.demo-hub-page .demo-site--salon .salon-first-visit figure,
.demo-hub-page .demo-site--salon .salon-book figure {
  max-height: 36vh !important;
}

.demo-hub-page .demo-site--salon .salon-marquee {
  min-height: 44px;
  padding-block: 0.65rem !important;
}

.demo-hub-page {
  /* 15 — Consultant: advisory content reads as rows, not oversized cards. */
}

.demo-hub-page .demo-site--consultant .consultant-problems,
.demo-hub-page .demo-site--consultant .consultant-services,
.demo-hub-page .demo-site--consultant .consultant-fit,
.demo-hub-page .demo-site--consultant .consultant-process,
.demo-hub-page .demo-site--consultant .consultant-proof,
.demo-hub-page .demo-site--consultant .consultant-call {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--consultant .consultant-services figure,
.demo-hub-page .demo-site--consultant .consultant-call figure {
  max-height: 230px !important;
}

.demo-hub-page .demo-site--consultant .consultant-problems button,
.demo-hub-page .demo-site--consultant .consultant-process button {
  min-height: 66px !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
}

.demo-hub-page {
  /* 16 — Coach: conversational lists and sessions replace tall feature cards. */
}

.demo-hub-page .demo-site--coach .coach-for,
.demo-hub-page .demo-site--coach .coach-method,
.demo-hub-page .demo-site--coach .coach-options,
.demo-hub-page .demo-site--coach .coach-about,
.demo-hub-page .demo-site--coach .coach-call {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--coach .coach-hero > figure,
.demo-hub-page .demo-site--coach .coach-method figure,
.demo-hub-page .demo-site--coach .coach-about figure,
.demo-hub-page .demo-site--coach .coach-call figure {
  max-height: 36vh !important;
}

.demo-hub-page .demo-site--coach .coach-for button {
  min-height: 60px !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
}

.demo-hub-page {
  /* 17 — Tutor: worksheet-like rows, compact subjects and parent guidance. */
}

.demo-hub-page .demo-site--tutor .tutor-help,
.demo-hub-page .demo-site--tutor .tutor-subjects,
.demo-hub-page .demo-site--tutor .tutor-approach,
.demo-hub-page .demo-site--tutor .tutor-parents,
.demo-hub-page .demo-site--tutor .tutor-pricing,
.demo-hub-page .demo-site--tutor .tutor-call {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--tutor .tutor-hero > figure,
.demo-hub-page .demo-site--tutor .tutor-approach figure,
.demo-hub-page .demo-site--tutor .tutor-parents figure,
.demo-hub-page .demo-site--tutor .tutor-call figure {
  max-height: 34vh !important;
}

.demo-hub-page .demo-site--tutor .tutor-help button,
.demo-hub-page .demo-site--tutor .tutor-subjects button {
  min-height: 62px !important;
  border-radius: 0 !important;
}

.demo-hub-page {
  /* 18 — Lawyer: precise service rows and compact consultation intake. */
}

.demo-hub-page .demo-site--lawyer .lawyer-services,
.demo-hub-page .demo-site--lawyer .lawyer-approach,
.demo-hub-page .demo-site--lawyer .lawyer-experience,
.demo-hub-page .demo-site--lawyer .lawyer-matters,
.demo-hub-page .demo-site--lawyer .lawyer-process,
.demo-hub-page .demo-site--lawyer .lawyer-consult {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--lawyer .lawyer-hero > figure,
.demo-hub-page .demo-site--lawyer .lawyer-approach > figure,
.demo-hub-page .demo-site--lawyer .lawyer-consult figure {
  max-height: 35vh !important;
}

.demo-hub-page .demo-site--lawyer .lawyer-services article {
  min-height: 82px !important;
}

.demo-hub-page .demo-site--lawyer .lawyer-process button {
  min-height: 62px !important;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--lawyer .lawyer-consult form {
  max-height: 82vh;
  overflow: auto;
}

.demo-hub-page {
  /* 19 — Designer: compact collage, service bands and project brief. */
}

.demo-hub-page .demo-site--designer .designer-work,
.demo-hub-page .demo-site--designer .designer-services,
.demo-hub-page .demo-site--designer .designer-fit,
.demo-hub-page .demo-site--designer .designer-process,
.demo-hub-page .demo-site--designer .designer-pricing,
.demo-hub-page .demo-site--designer .designer-project {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--designer .designer-case__images figure,
.demo-hub-page .demo-site--designer .designer-services figure,
.demo-hub-page .demo-site--designer .designer-fit figure,
.demo-hub-page .demo-site--designer .designer-project figure {
  max-height: 34vh !important;
}

.demo-hub-page .demo-site--designer .designer-work__tabs button,
.demo-hub-page .demo-site--designer .designer-process button {
  min-height: 54px !important;
  border-radius: 0 !important;
}

.demo-hub-page {
  /* 20 — Bookkeeper: status modules, reports and fit form remain data-dense. */
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-problem,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-services,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-report,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-process,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-trust,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call {
  padding-block: clamp(2rem, 3vw, 2.75rem) !important;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-problem button {
  min-height: 102px !important;
  justify-content: space-between;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-services figure,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing figure,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call figure {
  max-height: 32vh !important;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-process button {
  min-height: 60px !important;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-call form {
  max-height: 82vh;
  overflow: auto;
}@media (max-width: 760px) {
  .demo-hub-page .demo-site:not([class*=demo-site--]) section {
    max-height: none;
    padding: 1.75rem 1rem !important;
    overflow: visible;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) section figure,
  .demo-hub-page .demo-site:not([class*=demo-site--]) section article figure {
    max-height: 320px !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-intro,
  .demo-hub-page .demo-site--artist .artist-statement {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--jewelry .jewel-intro__lead,
  .demo-hub-page .demo-site--jewelry .jewel-intro__notes,
  .demo-hub-page .demo-site--artist .artist-statement__copy,
  .demo-hub-page .demo-site--artist .artist-statement > figure,
  .demo-hub-page .demo-site--artist .artist-statement__routes {
    width: 100%;
  }}
/* Demo-system refinement: consistent type and scale, with a distinct
   composition for every independent-professional direction. */
.demo-hub-page .demo-site {
  font-family: "DM Sans", Arial, sans-serif !important;
}

.demo-hub-page .demo-site button,
.demo-hub-page .demo-site header > a:last-child,
.demo-hub-page .demo-site .professional-mode-switch button {
  height: auto !important;
  min-height: 40px;
  border-radius: 8px !important;
}

.demo-hub-page .demo-site h1,
.demo-hub-page .demo-site h2,
.demo-hub-page .demo-site h3,
.demo-hub-page .demo-site h4,
.demo-hub-page .demo-site h5,
.demo-hub-page .demo-site h6 {
  max-width: 100%;
  font-family: "DM Serif Display", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.04 !important;
}

.demo-hub-page .demo-site h1,
.demo-hub-page .demo-site h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
}

.demo-hub-page .demo-site h3 {
  font-size: clamp(1.75rem, 3vw, 2.65rem) !important;
}

.demo-hub-page .demo-site h4 {
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
}

.demo-hub-page .demo-site p,
.demo-hub-page .demo-site span,
.demo-hub-page .demo-site a,
.demo-hub-page .demo-site button,
.demo-hub-page .demo-site input,
.demo-hub-page .demo-site select,
.demo-hub-page .demo-site textarea,
.demo-hub-page .demo-site label,
.demo-hub-page .demo-site small,
.demo-hub-page .demo-site strong,
.demo-hub-page .demo-site b {
  font-family: "DM Sans", Arial, sans-serif;
}

.demo-hub-page .demo-site main > section {
  height: auto !important;
  min-height: 0 !important;
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

.demo-hub-page .demo-site main > section:first-child {
  padding-top: clamp(2rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

.demo-hub-page .demo-site article,
.demo-hub-page .demo-site main button,
.demo-hub-page .demo-site main a,
.demo-hub-page .demo-site form,
.demo-hub-page .demo-site form input,
.demo-hub-page .demo-site form select,
.demo-hub-page .demo-site form textarea,
.demo-hub-page .demo-site figure {
  border-radius: 10px !important;
}

.demo-hub-page .demo-site main button,
.demo-hub-page .demo-site main a {
  max-width: 100%;
}

.demo-hub-page .demo-site main button {
  height: auto !important;
  min-height: 42px;
  padding: 0.72rem 1rem;
  border: 1px solid currentColor;
  line-height: 1.2;
}

.demo-hub-page .demo-site main figure {
  max-height: 520px !important;
  overflow: hidden;
}

.demo-hub-page .demo-site main > section:not(:first-child) figure {
  max-height: 400px !important;
}

.demo-hub-page .demo-site main figure img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site main > section:not(:first-child) figure img {
  max-height: 400px;
}

.demo-hub-page .demo-site article {
  height: auto !important;
  min-height: 0 !important;
}

.demo-hub-page {
  /* Consultant: cinematic lead, dark problem ledger, compact advisory rows. */
}

.demo-hub-page .demo-site--consultant {
  background: #f2f1eb;
  color: #17231f;
}

.demo-hub-page .demo-site--consultant .consultant-site {
  max-width: 1440px;
  margin: 0 auto;
  background: #f7f6f1;
}

.demo-hub-page .demo-site--consultant .consultant-nav {
  min-height: 66px;
  padding: 0.8rem clamp(1rem, 4vw, 3.5rem);
}

.demo-hub-page .demo-site--consultant .consultant-hero {
  position: relative;
  display: flex;
  min-height: 520px !important;
  padding: clamp(2rem, 4vw, 3.5rem) !important;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #101714;
}

.demo-hub-page .demo-site--consultant .consultant-hero > figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--consultant .consultant-hero > figure img {
  max-height: none;
  filter: saturate(0.72) contrast(1.04);
}

.demo-hub-page .demo-site--consultant .consultant-hero .consultant-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 13, 11, 0.9) 0%, rgba(7, 13, 11, 0.5) 58%, rgba(7, 13, 11, 0.12) 100%);
}

.demo-hub-page .demo-site--consultant .consultant-hero .consultant-hero__copy {
  position: relative;
  z-index: 2;
  width: min(700px, 70%);
}

.demo-hub-page .demo-site--consultant .consultant-hero .consultant-hero__copy h2 {
  margin: 0.55rem 0 1rem;
}

.demo-hub-page .demo-site--consultant .consultant-hero .consultant-hero__copy > span {
  display: block;
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.55;
}

.demo-hub-page .demo-site--consultant .consultant-hero .consultant-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.demo-hub-page .demo-site--consultant .consultant-hero .consultant-hero__copy a {
  display: inline-flex;
  min-height: 44px;
  padding: 0.8rem 1.1rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}

.demo-hub-page .demo-site--consultant .consultant-hero .consultant-hero__copy a:first-child {
  border-color: #fff;
  color: #102019;
  background: #fff;
}

.demo-hub-page .demo-site--consultant .consultant-hero > aside {
  position: relative;
  z-index: 2;
  width: 250px;
  margin-left: auto;
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.demo-hub-page .demo-site--consultant .consultant-hero > aside span,
.demo-hub-page .demo-site--consultant .consultant-hero > aside strong {
  display: block;
}

.demo-hub-page .demo-site--consultant .consultant-hero > aside span {
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.demo-hub-page .demo-site--consultant .consultant-problems {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
  color: #f7f6f1;
  background: #101714;
}

.demo-hub-page .demo-site--consultant .consultant-problems > header {
  width: 31%;
}

.demo-hub-page .demo-site--consultant .consultant-problems > div {
  display: flex;
  width: calc(69% - 2.5rem);
  flex-wrap: wrap;
  align-content: flex-start;
}

.demo-hub-page .demo-site--consultant .consultant-problems button {
  display: flex;
  width: 50%;
  min-height: 88px;
  padding: 1rem 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 !important;
  color: inherit;
  background: transparent;
  text-align: left;
}

.demo-hub-page .demo-site--consultant .consultant-problems button span {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.62);
}

.demo-hub-page .demo-site--consultant .consultant-problems button:nth-child(odd) {
  padding-right: 1.2rem;
}

.demo-hub-page .demo-site--consultant .consultant-problems button:nth-child(even) {
  padding-left: 1.2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.demo-hub-page .demo-site--consultant .consultant-problems button.is-active {
  color: #b8f267;
}

.demo-hub-page .demo-site--consultant .consultant-services,
.demo-hub-page .demo-site--consultant .consultant-proof {
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
}

.demo-hub-page .demo-site--consultant .consultant-services > header,
.demo-hub-page .demo-site--consultant .consultant-proof > header {
  display: flex;
  margin-bottom: 2rem;
  justify-content: space-between;
  gap: 2rem;
}

.demo-hub-page .demo-site--consultant .consultant-services > header h3,
.demo-hub-page .demo-site--consultant .consultant-proof > header h3 {
  max-width: 620px;
}

.demo-hub-page .demo-site--consultant .consultant-services > div,
.demo-hub-page .demo-site--consultant .consultant-proof > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .demo-site--consultant .consultant-services article,
.demo-hub-page .demo-site--consultant .consultant-proof article {
  display: flex;
  width: calc(33.333% - 0.67rem);
  padding: 1rem;
  flex-direction: column;
  border: 1px solid #ccd2ce;
  background: #fff;
}

.demo-hub-page .demo-site--consultant .consultant-services figure,
.demo-hub-page .demo-site--consultant .consultant-proof figure {
  height: 170px;
  margin: 0.8rem 0 1rem;
}

.demo-hub-page .demo-site--consultant .consultant-fit {
  display: flex;
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
  align-items: flex-start;
  gap: 2rem;
  background: #b8f267;
}

.demo-hub-page .demo-site--consultant .consultant-fit > div:first-child {
  width: 40%;
}

.demo-hub-page .demo-site--consultant .consultant-fit > div:nth-child(2) {
  display: flex;
  width: 60%;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(16, 23, 20, 0.24);
}

.demo-hub-page .demo-site--consultant .consultant-fit article {
  width: calc(33.333% - 1px);
  padding: 1rem;
  border-radius: 0 !important;
  background: #b8f267;
}

.demo-hub-page .demo-site--consultant .consultant-fit > a {
  display: none;
}

.demo-hub-page .demo-site--consultant .consultant-process {
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
}

.demo-hub-page .demo-site--consultant .consultant-process > div {
  display: flex;
  margin-top: 1.5rem;
  border-top: 1px solid #b8c0bb;
}

.demo-hub-page .demo-site--consultant .consultant-process button {
  width: 25%;
  border: 0;
  border-right: 1px solid #b8c0bb;
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--consultant .consultant-proof {
  color: #f7f6f1;
  background: #17231f;
}

.demo-hub-page .demo-site--consultant .consultant-proof article {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.demo-hub-page .demo-site--consultant .consultant-call {
  display: flex;
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
  gap: 2rem;
}

.demo-hub-page .demo-site--consultant .consultant-call > div,
.demo-hub-page .demo-site--consultant .consultant-call > form {
  width: calc(50% - 1rem);
}

.demo-hub-page .demo-site--consultant .consultant-call figure {
  height: 250px;
  margin-top: 1.5rem;
}

.demo-hub-page .demo-site--consultant .consultant-footer {
  padding: 2.5rem clamp(1rem, 4vw, 3.5rem);
}

.demo-hub-page {
  /* Coach: warm editorial page with conversational lists, not dashboard cards. */
}

.demo-hub-page .demo-site--coach {
  background: #d8c6b1;
  color: #2d211b;
}

.demo-hub-page .demo-site--coach .coach-site {
  max-width: 1320px;
  margin: 0 auto;
  background: #f7f0e6;
}

.demo-hub-page .demo-site--coach .coach-nav {
  min-height: 66px;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
}

.demo-hub-page .demo-site--coach .professional-mode-switch {
  padding: 0.65rem clamp(1rem, 4vw, 3rem);
  border-block: 1px solid #cfbdaa;
  background: #efe2d2;
}

.demo-hub-page .demo-site--coach .professional-mode-switch button {
  min-height: 36px;
  border-radius: 5px !important;
}

.demo-hub-page .demo-site--coach .coach-hero {
  display: flex;
  min-height: 0 !important;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.demo-hub-page .demo-site--coach .coach-hero .coach-hero__copy {
  width: 51%;
}

.demo-hub-page .demo-site--coach .coach-hero .coach-hero__copy h2 em {
  color: #a33b2e;
}

.demo-hub-page .demo-site--coach .coach-hero .coach-hero__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.demo-hub-page .demo-site--coach .coach-hero > figure {
  width: 41%;
  height: 430px;
  margin: 0;
  transform: rotate(1.2deg);
}

.demo-hub-page .demo-site--coach .coach-hero > aside {
  width: 180px;
  margin-left: -5rem;
  margin-bottom: -15rem;
  padding: 1rem;
  border: 1px solid #2d211b;
  background: #f5c958;
  transform: rotate(-2deg);
}

.demo-hub-page .demo-site--coach .coach-for {
  display: flex;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  gap: 3rem;
  border-top: 1px solid #cfbdaa;
}

.demo-hub-page .demo-site--coach .coach-for > header {
  width: 38%;
}

.demo-hub-page .demo-site--coach .coach-for > div {
  display: flex;
  width: 62%;
  flex-direction: column;
}

.demo-hub-page .demo-site--coach .coach-for button {
  display: flex;
  min-height: 68px;
  padding: 0.8rem 0;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid #cfbdaa;
  border-radius: 0 !important;
  color: inherit;
  background: transparent;
  text-align: left;
}

.demo-hub-page .demo-site--coach .coach-for button b {
  width: 42%;
}

.demo-hub-page .demo-site--coach .coach-for button span {
  width: 54%;
}

.demo-hub-page .demo-site--coach .coach-for button.is-active {
  color: #a33b2e;
}

.demo-hub-page .demo-site--coach .coach-method {
  display: flex;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  gap: 1rem;
  color: #f8f2e9;
  background: #33251f;
}

.demo-hub-page .demo-site--coach .coach-method .coach-method__intro {
  width: 46%;
}

.demo-hub-page .demo-site--coach .coach-method figure {
  height: 250px;
  margin-top: 1.4rem;
}

.demo-hub-page .demo-site--coach .coach-method .coach-method__steps {
  display: flex;
  width: 54%;
  flex-wrap: wrap;
  align-content: flex-start;
}

.demo-hub-page .demo-site--coach .coach-method article {
  width: 50%;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--coach .coach-options {
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
}

.demo-hub-page .demo-site--coach .coach-options > header {
  max-width: 650px;
}

.demo-hub-page .demo-site--coach .coach-options > div {
  display: flex;
  margin-top: 1.8rem;
  gap: 1rem;
}

.demo-hub-page .demo-site--coach .coach-options article {
  width: calc(33.333% - 0.67rem);
  padding: 1.25rem;
  border: 1px solid #cfbdaa;
  background: #fffaf3;
}

.demo-hub-page .demo-site--coach .coach-about,
.demo-hub-page .demo-site--coach .coach-call {
  display: flex;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.demo-hub-page .demo-site--coach .coach-about > figure,
.demo-hub-page .demo-site--coach .coach-about > div,
.demo-hub-page .demo-site--coach .coach-about > form,
.demo-hub-page .demo-site--coach .coach-call > figure,
.demo-hub-page .demo-site--coach .coach-call > div,
.demo-hub-page .demo-site--coach .coach-call > form {
  width: calc(50% - 2rem);
}

.demo-hub-page .demo-site--coach .coach-about figure,
.demo-hub-page .demo-site--coach .coach-call > div figure {
  height: 310px;
}

.demo-hub-page .demo-site--coach .coach-call {
  background: #e8d8c7;
}

.demo-hub-page .demo-site--coach .coach-footer {
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
}

.demo-hub-page {
  /* Tutor: crisp academic worksheet composition and compact subject rails. */
}

.demo-hub-page .demo-site--tutor {
  background: #dfe8f2;
  color: #14283a;
}

.demo-hub-page .demo-site--tutor .tutor-site {
  max-width: 1360px;
  margin: 0 auto;
  background: #f8fbfd;
}

.demo-hub-page .demo-site--tutor .tutor-nav {
  min-height: 66px;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
}

.demo-hub-page .demo-site--tutor .professional-mode-switch {
  padding: 0.65rem clamp(1rem, 4vw, 3rem);
  background: #eef5fb;
}

.demo-hub-page .demo-site--tutor .tutor-hero {
  display: flex;
  min-height: 0 !important;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  align-items: stretch;
  gap: 1rem;
}

.demo-hub-page .demo-site--tutor .tutor-hero .tutor-hero__copy {
  display: flex;
  width: 48%;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  flex-direction: column;
  justify-content: center;
  border: 1px solid #b9cad8;
  background: #fff;
}

.demo-hub-page .demo-site--tutor .tutor-hero > figure {
  width: 52%;
  height: 420px;
  margin: 0;
}

.demo-hub-page .demo-site--tutor .tutor-hero > aside {
  position: absolute;
  right: clamp(2rem, 6vw, 6rem);
  bottom: 1.25rem;
  width: 220px;
  padding: 0.9rem;
  border: 1px solid #14283a;
  border-radius: 8px;
  background: #ffd765;
}

.demo-hub-page .demo-site--tutor .tutor-help {
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
}

.demo-hub-page .demo-site--tutor .tutor-help > header {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.demo-hub-page .demo-site--tutor .tutor-help > div {
  display: flex;
  border-top: 1px solid #b9cad8;
  flex-wrap: wrap;
}

.demo-hub-page .demo-site--tutor .tutor-help button {
  display: flex;
  width: 50%;
  min-height: 84px;
  padding: 1rem;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  border-right: 1px solid #b9cad8;
  border-bottom: 1px solid #b9cad8;
  border-radius: 0 !important;
  color: inherit;
  background: transparent;
  text-align: left;
}

.demo-hub-page .demo-site--tutor .tutor-help button.is-active {
  background: #d9ebff;
}

.demo-hub-page .demo-site--tutor .tutor-subjects {
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  color: #fff;
  background: #173d65;
}

.demo-hub-page .demo-site--tutor .tutor-subjects > div {
  display: flex;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.demo-hub-page .demo-site--tutor .tutor-subjects button {
  width: 20%;
  min-height: 92px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0 !important;
  color: #fff;
  background: transparent;
}

.demo-hub-page .demo-site--tutor .tutor-subjects button.is-active {
  color: #14283a;
  background: #ffd765;
}

.demo-hub-page .demo-site--tutor .tutor-approach,
.demo-hub-page .demo-site--tutor .tutor-parents,
.demo-hub-page .demo-site--tutor .tutor-pricing,
.demo-hub-page .demo-site--tutor .tutor-call {
  display: flex;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  gap: 2rem;
}

.demo-hub-page .demo-site--tutor .tutor-approach > div,
.demo-hub-page .demo-site--tutor .tutor-parents > figure,
.demo-hub-page .demo-site--tutor .tutor-parents > div,
.demo-hub-page .demo-site--tutor .tutor-pricing > div,
.demo-hub-page .demo-site--tutor .tutor-call > div,
.demo-hub-page .demo-site--tutor .tutor-call > form {
  width: calc(50% - 1rem);
}

.demo-hub-page .demo-site--tutor .tutor-approach > div:last-child {
  display: flex;
  flex-wrap: wrap;
}

.demo-hub-page .demo-site--tutor .tutor-approach article {
  width: 50%;
  padding: 1rem;
  border-bottom: 1px solid #b9cad8;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--tutor .tutor-approach figure,
.demo-hub-page .demo-site--tutor .tutor-parents figure,
.demo-hub-page .demo-site--tutor .tutor-call figure {
  height: 280px;
}

.demo-hub-page .demo-site--tutor .tutor-pricing {
  background: #ffd765;
}

.demo-hub-page .demo-site--tutor .tutor-footer {
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
}

.demo-hub-page {
  /* Lawyer: restrained legal editorial system with service rows, not cards. */
}

.demo-hub-page .demo-site--lawyer {
  background: #d8d5ce;
  color: #1b1b18;
}

.demo-hub-page .demo-site--lawyer .lawyer-site {
  max-width: 1380px;
  margin: 0 auto;
  background: #f4f1e9;
}

.demo-hub-page .demo-site--lawyer .lawyer-nav {
  min-height: 68px;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid #bdb7aa;
}

.demo-hub-page .demo-site--lawyer .lawyer-hero {
  display: flex;
  min-height: 0 !important;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  align-items: stretch;
  gap: 0;
}

.demo-hub-page .demo-site--lawyer .lawyer-hero .lawyer-hero__copy {
  display: flex;
  width: 44%;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  flex-direction: column;
  justify-content: center;
  border: 1px solid #bdb7aa;
  background: #eee8dc;
}

.demo-hub-page .demo-site--lawyer .lawyer-hero > figure {
  width: 56%;
  height: 470px;
  margin: 0;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--lawyer .lawyer-hero > aside {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: 2.5rem;
  width: 280px;
  padding: 0.9rem;
  color: #f4f1e9;
  background: rgba(27, 27, 24, 0.92);
}

.demo-hub-page .demo-site--lawyer .lawyer-notice {
  display: flex;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  gap: 2rem;
  color: #f4f1e9;
  background: #1b1b18;
}

.demo-hub-page .demo-site--lawyer .lawyer-services,
.demo-hub-page .demo-site--lawyer .lawyer-experience,
.demo-hub-page .demo-site--lawyer .lawyer-matters,
.demo-hub-page .demo-site--lawyer .lawyer-process {
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
}

.demo-hub-page .demo-site--lawyer .lawyer-services > header {
  max-width: 670px;
  margin-bottom: 2rem;
}

.demo-hub-page .demo-site--lawyer .lawyer-services > div {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #9e988d;
}

.demo-hub-page .demo-site--lawyer .lawyer-services article {
  display: flex;
  width: 100%;
  min-height: 106px !important;
  padding: 1rem 0;
  align-items: center;
  gap: 1.5rem;
  border: 0;
  border-bottom: 1px solid #9e988d;
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--lawyer .lawyer-services article > span {
  width: 8%;
}

.demo-hub-page .demo-site--lawyer .lawyer-services article h4 {
  width: 29%;
}

.demo-hub-page .demo-site--lawyer .lawyer-services article p {
  width: 42%;
}

.demo-hub-page .demo-site--lawyer .lawyer-services article button {
  width: 21%;
  border: 1px solid #1b1b18;
  background: transparent;
}

.demo-hub-page .demo-site--lawyer .lawyer-approach {
  display: flex;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  gap: clamp(1.5rem, 5vw, 4rem);
  color: #f4f1e9;
  background: #211f1a;
}

.demo-hub-page .demo-site--lawyer .lawyer-approach > figure,
.demo-hub-page .demo-site--lawyer .lawyer-approach > div {
  width: calc(50% - 2rem);
}

.demo-hub-page .demo-site--lawyer .lawyer-approach > figure {
  height: 370px;
}

.demo-hub-page .demo-site--lawyer .lawyer-approach article {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--lawyer .lawyer-experience > div,
.demo-hub-page .demo-site--lawyer .lawyer-matters > div {
  display: flex;
  margin-top: 1.5rem;
  gap: 1px;
  background: #aaa397;
}

.demo-hub-page .demo-site--lawyer .lawyer-experience article,
.demo-hub-page .demo-site--lawyer .lawyer-matters article {
  width: calc(33.333% - 1px);
  padding: 1.2rem;
  border-radius: 0 !important;
  background: #f4f1e9;
}

.demo-hub-page .demo-site--lawyer .lawyer-matters {
  color: #f4f1e9;
  background: #1b1b18;
}

.demo-hub-page .demo-site--lawyer .lawyer-matters > div {
  background: rgba(255, 255, 255, 0.2);
}

.demo-hub-page .demo-site--lawyer .lawyer-matters article {
  background: #252520;
}

.demo-hub-page .demo-site--lawyer .lawyer-process > div {
  display: flex;
  margin-top: 1.5rem;
}

.demo-hub-page .demo-site--lawyer .lawyer-process button {
  width: 25%;
  border: 0;
  border-block: 1px solid #9e988d;
  border-right: 1px solid #9e988d;
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--lawyer .lawyer-consult {
  display: flex;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  gap: 2rem;
  background: #e4ded1;
}

.demo-hub-page .demo-site--lawyer .lawyer-consult > div,
.demo-hub-page .demo-site--lawyer .lawyer-consult > form {
  width: calc(50% - 1rem);
}

.demo-hub-page .demo-site--lawyer .lawyer-consult figure {
  height: 280px;
  margin-top: 1.5rem;
}

.demo-hub-page .demo-site--lawyer .lawyer-footer {
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
}

.demo-hub-page {
  /* Designer: high-energy editorial portfolio with hard edges and collage scale. */
}

.demo-hub-page .demo-site--designer {
  background: #f06a2d;
  color: #251d18;
}

.demo-hub-page .demo-site--designer .designer-site {
  max-width: 1400px;
  margin: 0 auto;
  background: #f6f0e4;
}

.demo-hub-page .demo-site--designer .designer-nav {
  min-height: 66px;
  padding: 0.8rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid #251d18;
}

.demo-hub-page .demo-site--designer .designer-hero {
  display: flex;
  min-height: 0 !important;
  padding: 0 !important;
  align-items: stretch;
  border-bottom: 1px solid #251d18;
}

.demo-hub-page .demo-site--designer .designer-hero .designer-hero__copy {
  display: flex;
  width: 48%;
  padding: clamp(2rem, 5vw, 4rem);
  flex-direction: column;
  justify-content: center;
  background: #ff6c2f;
}

.demo-hub-page .demo-site--designer .designer-hero .designer-hero__copy h2 em {
  color: #f6f0e4;
}

.demo-hub-page .demo-site--designer .designer-hero .designer-hero__image {
  width: 52%;
  height: 480px;
  margin: 0;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--designer .designer-hero > aside {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  padding: 0.6rem 0.8rem;
  gap: 0.8rem;
  color: #fff;
  background: #251d18;
}

.demo-hub-page .demo-site--designer .designer-marquee {
  display: flex;
  min-height: 48px;
  padding: 0.75rem 1rem;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #251d18;
  background: #c8ef56;
}

.demo-hub-page .demo-site--designer .designer-work,
.demo-hub-page .demo-site--designer .designer-services,
.demo-hub-page .demo-site--designer .designer-fit,
.demo-hub-page .demo-site--designer .designer-process,
.demo-hub-page .demo-site--designer .designer-pricing,
.demo-hub-page .demo-site--designer .designer-project {
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
}

.demo-hub-page .demo-site--designer .designer-work > header {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.demo-hub-page .demo-site--designer .designer-work__tabs {
  display: flex;
  border-block: 1px solid #251d18;
}

.demo-hub-page .demo-site--designer .designer-work__tabs button {
  flex: 1;
  border: 0;
  border-right: 1px solid #251d18;
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--designer .designer-work__tabs button.is-active {
  color: #fff;
  background: #251d18;
}

.demo-hub-page .demo-site--designer .designer-case {
  display: flex;
  margin-top: 1rem;
  gap: 1rem;
}

.demo-hub-page .demo-site--designer .designer-case .designer-case__copy {
  width: 40%;
  padding: 1.5rem;
  border: 1px solid #251d18;
  background: #fffaf0;
}

.demo-hub-page .demo-site--designer .designer-case .designer-case__copy > div {
  display: flex;
  flex-wrap: wrap;
}

.demo-hub-page .demo-site--designer .designer-case .designer-case__copy article {
  width: 50%;
  padding: 0.8rem;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--designer .designer-case .designer-case__images {
  display: flex;
  width: 60%;
  gap: 1rem;
}

.demo-hub-page .demo-site--designer .designer-case .designer-case__images figure:first-child {
  width: 65%;
  height: 390px;
}

.demo-hub-page .demo-site--designer .designer-case .designer-case__images figure:last-child {
  width: 35%;
  height: 300px;
  margin-top: 90px;
}

.demo-hub-page .demo-site--designer .designer-services {
  color: #fff;
  background: #251d18;
}

.demo-hub-page .demo-site--designer .designer-services > div {
  display: flex;
  margin-top: 1.5rem;
  gap: 1rem;
}

.demo-hub-page .demo-site--designer .designer-services article {
  width: calc(33.333% - 0.67rem);
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: transparent;
}

.demo-hub-page .demo-site--designer .designer-services figure {
  height: 160px;
}

.demo-hub-page .demo-site--designer .designer-fit {
  display: flex;
  gap: 2rem;
  background: #ff6c2f;
}

.demo-hub-page .demo-site--designer .designer-fit .designer-fit__intro,
.demo-hub-page .demo-site--designer .designer-fit .designer-fit__list {
  width: calc(50% - 1rem);
}

.demo-hub-page .demo-site--designer .designer-fit figure {
  height: 220px;
}

.demo-hub-page .demo-site--designer .designer-fit .designer-fit__list button {
  display: flex;
  width: 100%;
  min-height: 78px;
  padding: 0.8rem 0;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #251d18;
  border-radius: 0 !important;
  background: transparent;
  text-align: left;
}

.demo-hub-page .demo-site--designer .designer-fit .designer-fit__list button b,
.demo-hub-page .demo-site--designer .designer-fit .designer-fit__list button span {
  width: 46%;
}

.demo-hub-page .demo-site--designer .designer-process > div {
  display: flex;
  margin-top: 1.5rem;
  border-top: 1px solid #251d18;
}

.demo-hub-page .demo-site--designer .designer-process button {
  width: 25%;
  border: 0;
  border-right: 1px solid #251d18;
  border-bottom: 1px solid #251d18;
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--designer .designer-pricing,
.demo-hub-page .demo-site--designer .designer-project {
  display: flex;
  gap: 2rem;
}

.demo-hub-page .demo-site--designer .designer-pricing > div,
.demo-hub-page .demo-site--designer .designer-project > div,
.demo-hub-page .demo-site--designer .designer-project > form {
  width: calc(50% - 1rem);
}

.demo-hub-page .demo-site--designer .designer-pricing > div:last-child {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .demo-site--designer .designer-pricing article {
  width: 50%;
  padding: 1rem;
  border: 1px solid #251d18;
}

.demo-hub-page .demo-site--designer .designer-project {
  background: #c8ef56;
}

.demo-hub-page .demo-site--designer .designer-project figure {
  height: 280px;
}

.demo-hub-page .demo-site--designer .designer-footer {
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
}

.demo-hub-page {
  /* Bookkeeper: data-led financial page with compact status modules. */
}

.demo-hub-page .demo-site--bookkeeper {
  background: #d8e5e5;
  color: #073f42;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-site {
  max-width: 1400px;
  margin: 0 auto;
  background: #f5f4ec;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-nav {
  min-height: 66px;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-hero {
  display: flex;
  min-height: 0 !important;
  padding: 0 !important;
  align-items: stretch;
  color: #f8f6ed;
  background: #063f42;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-hero .bookkeeper-hero__copy {
  display: flex;
  width: 50%;
  padding: clamp(2rem, 5vw, 4rem);
  flex-direction: column;
  justify-content: center;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-hero .bookkeeper-hero__copy > div,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-hero .bookkeeper-hero__copy > aside {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-hero .bookkeeper-hero__copy > aside b {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 500;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-hero > figure {
  width: 50%;
  height: 470px;
  margin: 0;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-boundary {
  display: flex;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  gap: 1.5rem;
  border-bottom: 1px solid #c1ceca;
  background: #e9efe9;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-problem,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-services,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-report,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-process,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-trust,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call {
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > header {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-problem > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-problem button {
  display: flex;
  width: calc(33.333% - 0.5rem);
  min-height: 132px !important;
  padding: 1rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid #afbfba;
  color: #073f42;
  background: #e8eeea;
  text-align: left;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-problem button:nth-child(even) {
  background: #dce6f4;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-problem button.is-active {
  border-color: #073f42;
  color: #fff;
  background: #073f42;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-recommendation {
  display: flex;
  min-height: 70px;
  margin-top: 1rem;
  padding: 1rem;
  align-items: center;
  gap: 1rem;
  border-left: 4px solid #9ee667;
  background: #fff;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-services > header,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-report > div:first-child,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-process > header,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > header {
  max-width: 680px;
  margin-bottom: 1.6rem;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-services > div {
  display: flex;
  gap: 1rem;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-services article {
  display: flex;
  width: calc(25% - 0.75rem);
  padding: 1rem;
  flex-direction: column;
  border: 1px solid #b9c7c2;
  background: #fff;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-services figure {
  height: 150px;
  margin: 1rem 0;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-services button {
  width: 100%;
  margin-top: auto;
  border: 1px solid #073f42;
  color: #073f42;
  background: transparent;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-report {
  display: flex;
  gap: 2rem;
  color: #fff;
  background: #073f42;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-report > div {
  width: calc(50% - 1rem);
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-report > div:last-child {
  display: flex;
  flex-wrap: wrap;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-report article {
  width: 50%;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-process > div {
  display: flex;
  border-top: 1px solid #afbfba;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-process button {
  width: 25%;
  border: 0;
  border-right: 1px solid #afbfba;
  border-bottom: 1px solid #afbfba;
  border-radius: 0 !important;
  background: transparent;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing {
  display: flex;
  padding-block: 0 !important;
  align-items: stretch;
  color: #073f42;
  background: #c7ee75;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > div,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > figure {
  width: 50%;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > div {
  display: flex;
  padding: clamp(2rem, 5vw, 4rem);
  flex-direction: column;
  justify-content: center;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > figure {
  height: 360px;
  margin: 0;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > div {
  display: flex;
  gap: 1px;
  background: #afbfba;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-trust article {
  width: 25%;
  padding: 1rem;
  border-radius: 0 !important;
  background: #fff;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-call {
  display: flex;
  gap: 2rem;
  background: #e4eaf1;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-call > div,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call > form {
  width: calc(50% - 1rem);
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-call figure {
  height: 270px;
  margin-top: 1.5rem;
}

.demo-hub-page .demo-site--bookkeeper .bookkeeper-footer {
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
}@media (max-width: 900px) {
  .demo-hub-page .demo-site:not([class*=demo-site--]) main > section,
  .demo-hub-page .demo-site:not([class*=demo-site--]) main > section:first-child {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero,
  .demo-hub-page .demo-site--consultant .consultant-problems,
  .demo-hub-page .demo-site--consultant .consultant-fit,
  .demo-hub-page .demo-site--consultant .consultant-call,
  .demo-hub-page .demo-site--consultant .coach-hero,
  .demo-hub-page .demo-site--consultant .coach-for,
  .demo-hub-page .demo-site--consultant .coach-method,
  .demo-hub-page .demo-site--consultant .coach-about,
  .demo-hub-page .demo-site--consultant .coach-call,
  .demo-hub-page .demo-site--consultant .tutor-hero,
  .demo-hub-page .demo-site--consultant .tutor-approach,
  .demo-hub-page .demo-site--consultant .tutor-parents,
  .demo-hub-page .demo-site--consultant .tutor-pricing,
  .demo-hub-page .demo-site--consultant .tutor-call,
  .demo-hub-page .demo-site--consultant .lawyer-hero,
  .demo-hub-page .demo-site--consultant .lawyer-approach,
  .demo-hub-page .demo-site--consultant .lawyer-consult,
  .demo-hub-page .demo-site--consultant .designer-hero,
  .demo-hub-page .demo-site--consultant .designer-case,
  .demo-hub-page .demo-site--consultant .designer-fit,
  .demo-hub-page .demo-site--consultant .designer-pricing,
  .demo-hub-page .demo-site--consultant .designer-project,
  .demo-hub-page .demo-site--consultant .bookkeeper-hero,
  .demo-hub-page .demo-site--consultant .bookkeeper-report,
  .demo-hub-page .demo-site--consultant .bookkeeper-pricing,
  .demo-hub-page .demo-site--consultant .bookkeeper-call,
  .demo-hub-page .demo-site--coach .consultant-hero,
  .demo-hub-page .demo-site--coach .consultant-problems,
  .demo-hub-page .demo-site--coach .consultant-fit,
  .demo-hub-page .demo-site--coach .consultant-call,
  .demo-hub-page .demo-site--coach .coach-hero,
  .demo-hub-page .demo-site--coach .coach-for,
  .demo-hub-page .demo-site--coach .coach-method,
  .demo-hub-page .demo-site--coach .coach-about,
  .demo-hub-page .demo-site--coach .coach-call,
  .demo-hub-page .demo-site--coach .tutor-hero,
  .demo-hub-page .demo-site--coach .tutor-approach,
  .demo-hub-page .demo-site--coach .tutor-parents,
  .demo-hub-page .demo-site--coach .tutor-pricing,
  .demo-hub-page .demo-site--coach .tutor-call,
  .demo-hub-page .demo-site--coach .lawyer-hero,
  .demo-hub-page .demo-site--coach .lawyer-approach,
  .demo-hub-page .demo-site--coach .lawyer-consult,
  .demo-hub-page .demo-site--coach .designer-hero,
  .demo-hub-page .demo-site--coach .designer-case,
  .demo-hub-page .demo-site--coach .designer-fit,
  .demo-hub-page .demo-site--coach .designer-pricing,
  .demo-hub-page .demo-site--coach .designer-project,
  .demo-hub-page .demo-site--coach .bookkeeper-hero,
  .demo-hub-page .demo-site--coach .bookkeeper-report,
  .demo-hub-page .demo-site--coach .bookkeeper-pricing,
  .demo-hub-page .demo-site--coach .bookkeeper-call,
  .demo-hub-page .demo-site--tutor .consultant-hero,
  .demo-hub-page .demo-site--tutor .consultant-problems,
  .demo-hub-page .demo-site--tutor .consultant-fit,
  .demo-hub-page .demo-site--tutor .consultant-call,
  .demo-hub-page .demo-site--tutor .coach-hero,
  .demo-hub-page .demo-site--tutor .coach-for,
  .demo-hub-page .demo-site--tutor .coach-method,
  .demo-hub-page .demo-site--tutor .coach-about,
  .demo-hub-page .demo-site--tutor .coach-call,
  .demo-hub-page .demo-site--tutor .tutor-hero,
  .demo-hub-page .demo-site--tutor .tutor-approach,
  .demo-hub-page .demo-site--tutor .tutor-parents,
  .demo-hub-page .demo-site--tutor .tutor-pricing,
  .demo-hub-page .demo-site--tutor .tutor-call,
  .demo-hub-page .demo-site--tutor .lawyer-hero,
  .demo-hub-page .demo-site--tutor .lawyer-approach,
  .demo-hub-page .demo-site--tutor .lawyer-consult,
  .demo-hub-page .demo-site--tutor .designer-hero,
  .demo-hub-page .demo-site--tutor .designer-case,
  .demo-hub-page .demo-site--tutor .designer-fit,
  .demo-hub-page .demo-site--tutor .designer-pricing,
  .demo-hub-page .demo-site--tutor .designer-project,
  .demo-hub-page .demo-site--tutor .bookkeeper-hero,
  .demo-hub-page .demo-site--tutor .bookkeeper-report,
  .demo-hub-page .demo-site--tutor .bookkeeper-pricing,
  .demo-hub-page .demo-site--tutor .bookkeeper-call,
  .demo-hub-page .demo-site--lawyer .consultant-hero,
  .demo-hub-page .demo-site--lawyer .consultant-problems,
  .demo-hub-page .demo-site--lawyer .consultant-fit,
  .demo-hub-page .demo-site--lawyer .consultant-call,
  .demo-hub-page .demo-site--lawyer .coach-hero,
  .demo-hub-page .demo-site--lawyer .coach-for,
  .demo-hub-page .demo-site--lawyer .coach-method,
  .demo-hub-page .demo-site--lawyer .coach-about,
  .demo-hub-page .demo-site--lawyer .coach-call,
  .demo-hub-page .demo-site--lawyer .tutor-hero,
  .demo-hub-page .demo-site--lawyer .tutor-approach,
  .demo-hub-page .demo-site--lawyer .tutor-parents,
  .demo-hub-page .demo-site--lawyer .tutor-pricing,
  .demo-hub-page .demo-site--lawyer .tutor-call,
  .demo-hub-page .demo-site--lawyer .lawyer-hero,
  .demo-hub-page .demo-site--lawyer .lawyer-approach,
  .demo-hub-page .demo-site--lawyer .lawyer-consult,
  .demo-hub-page .demo-site--lawyer .designer-hero,
  .demo-hub-page .demo-site--lawyer .designer-case,
  .demo-hub-page .demo-site--lawyer .designer-fit,
  .demo-hub-page .demo-site--lawyer .designer-pricing,
  .demo-hub-page .demo-site--lawyer .designer-project,
  .demo-hub-page .demo-site--lawyer .bookkeeper-hero,
  .demo-hub-page .demo-site--lawyer .bookkeeper-report,
  .demo-hub-page .demo-site--lawyer .bookkeeper-pricing,
  .demo-hub-page .demo-site--lawyer .bookkeeper-call,
  .demo-hub-page .demo-site--designer .consultant-hero,
  .demo-hub-page .demo-site--designer .consultant-problems,
  .demo-hub-page .demo-site--designer .consultant-fit,
  .demo-hub-page .demo-site--designer .consultant-call,
  .demo-hub-page .demo-site--designer .coach-hero,
  .demo-hub-page .demo-site--designer .coach-for,
  .demo-hub-page .demo-site--designer .coach-method,
  .demo-hub-page .demo-site--designer .coach-about,
  .demo-hub-page .demo-site--designer .coach-call,
  .demo-hub-page .demo-site--designer .tutor-hero,
  .demo-hub-page .demo-site--designer .tutor-approach,
  .demo-hub-page .demo-site--designer .tutor-parents,
  .demo-hub-page .demo-site--designer .tutor-pricing,
  .demo-hub-page .demo-site--designer .tutor-call,
  .demo-hub-page .demo-site--designer .lawyer-hero,
  .demo-hub-page .demo-site--designer .lawyer-approach,
  .demo-hub-page .demo-site--designer .lawyer-consult,
  .demo-hub-page .demo-site--designer .designer-hero,
  .demo-hub-page .demo-site--designer .designer-case,
  .demo-hub-page .demo-site--designer .designer-fit,
  .demo-hub-page .demo-site--designer .designer-pricing,
  .demo-hub-page .demo-site--designer .designer-project,
  .demo-hub-page .demo-site--designer .bookkeeper-hero,
  .demo-hub-page .demo-site--designer .bookkeeper-report,
  .demo-hub-page .demo-site--designer .bookkeeper-pricing,
  .demo-hub-page .demo-site--designer .bookkeeper-call,
  .demo-hub-page .demo-site--bookkeeper .consultant-hero,
  .demo-hub-page .demo-site--bookkeeper .consultant-problems,
  .demo-hub-page .demo-site--bookkeeper .consultant-fit,
  .demo-hub-page .demo-site--bookkeeper .consultant-call,
  .demo-hub-page .demo-site--bookkeeper .coach-hero,
  .demo-hub-page .demo-site--bookkeeper .coach-for,
  .demo-hub-page .demo-site--bookkeeper .coach-method,
  .demo-hub-page .demo-site--bookkeeper .coach-about,
  .demo-hub-page .demo-site--bookkeeper .coach-call,
  .demo-hub-page .demo-site--bookkeeper .tutor-hero,
  .demo-hub-page .demo-site--bookkeeper .tutor-approach,
  .demo-hub-page .demo-site--bookkeeper .tutor-parents,
  .demo-hub-page .demo-site--bookkeeper .tutor-pricing,
  .demo-hub-page .demo-site--bookkeeper .tutor-call,
  .demo-hub-page .demo-site--bookkeeper .lawyer-hero,
  .demo-hub-page .demo-site--bookkeeper .lawyer-approach,
  .demo-hub-page .demo-site--bookkeeper .lawyer-consult,
  .demo-hub-page .demo-site--bookkeeper .designer-hero,
  .demo-hub-page .demo-site--bookkeeper .designer-case,
  .demo-hub-page .demo-site--bookkeeper .designer-fit,
  .demo-hub-page .demo-site--bookkeeper .designer-pricing,
  .demo-hub-page .demo-site--bookkeeper .designer-project,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems > header,
  .demo-hub-page .demo-site--consultant .consultant-problems > div,
  .demo-hub-page .demo-site--consultant .consultant-fit > div:first-child,
  .demo-hub-page .demo-site--consultant .consultant-fit > div:nth-child(2),
  .demo-hub-page .demo-site--consultant .consultant-call > div,
  .demo-hub-page .demo-site--consultant .consultant-call > form,
  .demo-hub-page .demo-site--consultant .coach-hero .coach-hero__copy,
  .demo-hub-page .demo-site--consultant .coach-hero > figure,
  .demo-hub-page .demo-site--consultant .coach-for > header,
  .demo-hub-page .demo-site--consultant .coach-for > div,
  .demo-hub-page .demo-site--consultant .coach-method .coach-method__intro,
  .demo-hub-page .demo-site--consultant .coach-method .coach-method__steps,
  .demo-hub-page .demo-site--consultant .coach-about > figure,
  .demo-hub-page .demo-site--consultant .coach-about > div,
  .demo-hub-page .demo-site--consultant .coach-call > div,
  .demo-hub-page .demo-site--consultant .coach-call > form,
  .demo-hub-page .demo-site--consultant .tutor-hero .tutor-hero__copy,
  .demo-hub-page .demo-site--consultant .tutor-hero > figure,
  .demo-hub-page .demo-site--consultant .tutor-approach > div,
  .demo-hub-page .demo-site--consultant .tutor-parents > figure,
  .demo-hub-page .demo-site--consultant .tutor-parents > div,
  .demo-hub-page .demo-site--consultant .tutor-pricing > div,
  .demo-hub-page .demo-site--consultant .tutor-call > div,
  .demo-hub-page .demo-site--consultant .tutor-call > form,
  .demo-hub-page .demo-site--consultant .lawyer-hero .lawyer-hero__copy,
  .demo-hub-page .demo-site--consultant .lawyer-hero > figure,
  .demo-hub-page .demo-site--consultant .lawyer-approach > figure,
  .demo-hub-page .demo-site--consultant .lawyer-approach > div,
  .demo-hub-page .demo-site--consultant .lawyer-consult > div,
  .demo-hub-page .demo-site--consultant .lawyer-consult > form,
  .demo-hub-page .demo-site--consultant .designer-hero .designer-hero__copy,
  .demo-hub-page .demo-site--consultant .designer-hero .designer-hero__image,
  .demo-hub-page .demo-site--consultant .designer-case .designer-case__copy,
  .demo-hub-page .demo-site--consultant .designer-case .designer-case__images,
  .demo-hub-page .demo-site--consultant .designer-fit .designer-fit__intro,
  .demo-hub-page .demo-site--consultant .designer-fit .designer-fit__list,
  .demo-hub-page .demo-site--consultant .designer-pricing > div,
  .demo-hub-page .demo-site--consultant .designer-project > div,
  .demo-hub-page .demo-site--consultant .designer-project > form,
  .demo-hub-page .demo-site--consultant .bookkeeper-hero .bookkeeper-hero__copy,
  .demo-hub-page .demo-site--consultant .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--consultant .bookkeeper-report > div,
  .demo-hub-page .demo-site--consultant .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--consultant .bookkeeper-pricing > figure,
  .demo-hub-page .demo-site--consultant .bookkeeper-call > div,
  .demo-hub-page .demo-site--consultant .bookkeeper-call > form,
  .demo-hub-page .demo-site--coach .consultant-problems > header,
  .demo-hub-page .demo-site--coach .consultant-problems > div,
  .demo-hub-page .demo-site--coach .consultant-fit > div:first-child,
  .demo-hub-page .demo-site--coach .consultant-fit > div:nth-child(2),
  .demo-hub-page .demo-site--coach .consultant-call > div,
  .demo-hub-page .demo-site--coach .consultant-call > form,
  .demo-hub-page .demo-site--coach .coach-hero .coach-hero__copy,
  .demo-hub-page .demo-site--coach .coach-hero > figure,
  .demo-hub-page .demo-site--coach .coach-for > header,
  .demo-hub-page .demo-site--coach .coach-for > div,
  .demo-hub-page .demo-site--coach .coach-method .coach-method__intro,
  .demo-hub-page .demo-site--coach .coach-method .coach-method__steps,
  .demo-hub-page .demo-site--coach .coach-about > figure,
  .demo-hub-page .demo-site--coach .coach-about > div,
  .demo-hub-page .demo-site--coach .coach-call > div,
  .demo-hub-page .demo-site--coach .coach-call > form,
  .demo-hub-page .demo-site--coach .tutor-hero .tutor-hero__copy,
  .demo-hub-page .demo-site--coach .tutor-hero > figure,
  .demo-hub-page .demo-site--coach .tutor-approach > div,
  .demo-hub-page .demo-site--coach .tutor-parents > figure,
  .demo-hub-page .demo-site--coach .tutor-parents > div,
  .demo-hub-page .demo-site--coach .tutor-pricing > div,
  .demo-hub-page .demo-site--coach .tutor-call > div,
  .demo-hub-page .demo-site--coach .tutor-call > form,
  .demo-hub-page .demo-site--coach .lawyer-hero .lawyer-hero__copy,
  .demo-hub-page .demo-site--coach .lawyer-hero > figure,
  .demo-hub-page .demo-site--coach .lawyer-approach > figure,
  .demo-hub-page .demo-site--coach .lawyer-approach > div,
  .demo-hub-page .demo-site--coach .lawyer-consult > div,
  .demo-hub-page .demo-site--coach .lawyer-consult > form,
  .demo-hub-page .demo-site--coach .designer-hero .designer-hero__copy,
  .demo-hub-page .demo-site--coach .designer-hero .designer-hero__image,
  .demo-hub-page .demo-site--coach .designer-case .designer-case__copy,
  .demo-hub-page .demo-site--coach .designer-case .designer-case__images,
  .demo-hub-page .demo-site--coach .designer-fit .designer-fit__intro,
  .demo-hub-page .demo-site--coach .designer-fit .designer-fit__list,
  .demo-hub-page .demo-site--coach .designer-pricing > div,
  .demo-hub-page .demo-site--coach .designer-project > div,
  .demo-hub-page .demo-site--coach .designer-project > form,
  .demo-hub-page .demo-site--coach .bookkeeper-hero .bookkeeper-hero__copy,
  .demo-hub-page .demo-site--coach .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--coach .bookkeeper-report > div,
  .demo-hub-page .demo-site--coach .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--coach .bookkeeper-pricing > figure,
  .demo-hub-page .demo-site--coach .bookkeeper-call > div,
  .demo-hub-page .demo-site--coach .bookkeeper-call > form,
  .demo-hub-page .demo-site--tutor .consultant-problems > header,
  .demo-hub-page .demo-site--tutor .consultant-problems > div,
  .demo-hub-page .demo-site--tutor .consultant-fit > div:first-child,
  .demo-hub-page .demo-site--tutor .consultant-fit > div:nth-child(2),
  .demo-hub-page .demo-site--tutor .consultant-call > div,
  .demo-hub-page .demo-site--tutor .consultant-call > form,
  .demo-hub-page .demo-site--tutor .coach-hero .coach-hero__copy,
  .demo-hub-page .demo-site--tutor .coach-hero > figure,
  .demo-hub-page .demo-site--tutor .coach-for > header,
  .demo-hub-page .demo-site--tutor .coach-for > div,
  .demo-hub-page .demo-site--tutor .coach-method .coach-method__intro,
  .demo-hub-page .demo-site--tutor .coach-method .coach-method__steps,
  .demo-hub-page .demo-site--tutor .coach-about > figure,
  .demo-hub-page .demo-site--tutor .coach-about > div,
  .demo-hub-page .demo-site--tutor .coach-call > div,
  .demo-hub-page .demo-site--tutor .coach-call > form,
  .demo-hub-page .demo-site--tutor .tutor-hero .tutor-hero__copy,
  .demo-hub-page .demo-site--tutor .tutor-hero > figure,
  .demo-hub-page .demo-site--tutor .tutor-approach > div,
  .demo-hub-page .demo-site--tutor .tutor-parents > figure,
  .demo-hub-page .demo-site--tutor .tutor-parents > div,
  .demo-hub-page .demo-site--tutor .tutor-pricing > div,
  .demo-hub-page .demo-site--tutor .tutor-call > div,
  .demo-hub-page .demo-site--tutor .tutor-call > form,
  .demo-hub-page .demo-site--tutor .lawyer-hero .lawyer-hero__copy,
  .demo-hub-page .demo-site--tutor .lawyer-hero > figure,
  .demo-hub-page .demo-site--tutor .lawyer-approach > figure,
  .demo-hub-page .demo-site--tutor .lawyer-approach > div,
  .demo-hub-page .demo-site--tutor .lawyer-consult > div,
  .demo-hub-page .demo-site--tutor .lawyer-consult > form,
  .demo-hub-page .demo-site--tutor .designer-hero .designer-hero__copy,
  .demo-hub-page .demo-site--tutor .designer-hero .designer-hero__image,
  .demo-hub-page .demo-site--tutor .designer-case .designer-case__copy,
  .demo-hub-page .demo-site--tutor .designer-case .designer-case__images,
  .demo-hub-page .demo-site--tutor .designer-fit .designer-fit__intro,
  .demo-hub-page .demo-site--tutor .designer-fit .designer-fit__list,
  .demo-hub-page .demo-site--tutor .designer-pricing > div,
  .demo-hub-page .demo-site--tutor .designer-project > div,
  .demo-hub-page .demo-site--tutor .designer-project > form,
  .demo-hub-page .demo-site--tutor .bookkeeper-hero .bookkeeper-hero__copy,
  .demo-hub-page .demo-site--tutor .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--tutor .bookkeeper-report > div,
  .demo-hub-page .demo-site--tutor .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--tutor .bookkeeper-pricing > figure,
  .demo-hub-page .demo-site--tutor .bookkeeper-call > div,
  .demo-hub-page .demo-site--tutor .bookkeeper-call > form,
  .demo-hub-page .demo-site--lawyer .consultant-problems > header,
  .demo-hub-page .demo-site--lawyer .consultant-problems > div,
  .demo-hub-page .demo-site--lawyer .consultant-fit > div:first-child,
  .demo-hub-page .demo-site--lawyer .consultant-fit > div:nth-child(2),
  .demo-hub-page .demo-site--lawyer .consultant-call > div,
  .demo-hub-page .demo-site--lawyer .consultant-call > form,
  .demo-hub-page .demo-site--lawyer .coach-hero .coach-hero__copy,
  .demo-hub-page .demo-site--lawyer .coach-hero > figure,
  .demo-hub-page .demo-site--lawyer .coach-for > header,
  .demo-hub-page .demo-site--lawyer .coach-for > div,
  .demo-hub-page .demo-site--lawyer .coach-method .coach-method__intro,
  .demo-hub-page .demo-site--lawyer .coach-method .coach-method__steps,
  .demo-hub-page .demo-site--lawyer .coach-about > figure,
  .demo-hub-page .demo-site--lawyer .coach-about > div,
  .demo-hub-page .demo-site--lawyer .coach-call > div,
  .demo-hub-page .demo-site--lawyer .coach-call > form,
  .demo-hub-page .demo-site--lawyer .tutor-hero .tutor-hero__copy,
  .demo-hub-page .demo-site--lawyer .tutor-hero > figure,
  .demo-hub-page .demo-site--lawyer .tutor-approach > div,
  .demo-hub-page .demo-site--lawyer .tutor-parents > figure,
  .demo-hub-page .demo-site--lawyer .tutor-parents > div,
  .demo-hub-page .demo-site--lawyer .tutor-pricing > div,
  .demo-hub-page .demo-site--lawyer .tutor-call > div,
  .demo-hub-page .demo-site--lawyer .tutor-call > form,
  .demo-hub-page .demo-site--lawyer .lawyer-hero .lawyer-hero__copy,
  .demo-hub-page .demo-site--lawyer .lawyer-hero > figure,
  .demo-hub-page .demo-site--lawyer .lawyer-approach > figure,
  .demo-hub-page .demo-site--lawyer .lawyer-approach > div,
  .demo-hub-page .demo-site--lawyer .lawyer-consult > div,
  .demo-hub-page .demo-site--lawyer .lawyer-consult > form,
  .demo-hub-page .demo-site--lawyer .designer-hero .designer-hero__copy,
  .demo-hub-page .demo-site--lawyer .designer-hero .designer-hero__image,
  .demo-hub-page .demo-site--lawyer .designer-case .designer-case__copy,
  .demo-hub-page .demo-site--lawyer .designer-case .designer-case__images,
  .demo-hub-page .demo-site--lawyer .designer-fit .designer-fit__intro,
  .demo-hub-page .demo-site--lawyer .designer-fit .designer-fit__list,
  .demo-hub-page .demo-site--lawyer .designer-pricing > div,
  .demo-hub-page .demo-site--lawyer .designer-project > div,
  .demo-hub-page .demo-site--lawyer .designer-project > form,
  .demo-hub-page .demo-site--lawyer .bookkeeper-hero .bookkeeper-hero__copy,
  .demo-hub-page .demo-site--lawyer .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--lawyer .bookkeeper-report > div,
  .demo-hub-page .demo-site--lawyer .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--lawyer .bookkeeper-pricing > figure,
  .demo-hub-page .demo-site--lawyer .bookkeeper-call > div,
  .demo-hub-page .demo-site--lawyer .bookkeeper-call > form,
  .demo-hub-page .demo-site--designer .consultant-problems > header,
  .demo-hub-page .demo-site--designer .consultant-problems > div,
  .demo-hub-page .demo-site--designer .consultant-fit > div:first-child,
  .demo-hub-page .demo-site--designer .consultant-fit > div:nth-child(2),
  .demo-hub-page .demo-site--designer .consultant-call > div,
  .demo-hub-page .demo-site--designer .consultant-call > form,
  .demo-hub-page .demo-site--designer .coach-hero .coach-hero__copy,
  .demo-hub-page .demo-site--designer .coach-hero > figure,
  .demo-hub-page .demo-site--designer .coach-for > header,
  .demo-hub-page .demo-site--designer .coach-for > div,
  .demo-hub-page .demo-site--designer .coach-method .coach-method__intro,
  .demo-hub-page .demo-site--designer .coach-method .coach-method__steps,
  .demo-hub-page .demo-site--designer .coach-about > figure,
  .demo-hub-page .demo-site--designer .coach-about > div,
  .demo-hub-page .demo-site--designer .coach-call > div,
  .demo-hub-page .demo-site--designer .coach-call > form,
  .demo-hub-page .demo-site--designer .tutor-hero .tutor-hero__copy,
  .demo-hub-page .demo-site--designer .tutor-hero > figure,
  .demo-hub-page .demo-site--designer .tutor-approach > div,
  .demo-hub-page .demo-site--designer .tutor-parents > figure,
  .demo-hub-page .demo-site--designer .tutor-parents > div,
  .demo-hub-page .demo-site--designer .tutor-pricing > div,
  .demo-hub-page .demo-site--designer .tutor-call > div,
  .demo-hub-page .demo-site--designer .tutor-call > form,
  .demo-hub-page .demo-site--designer .lawyer-hero .lawyer-hero__copy,
  .demo-hub-page .demo-site--designer .lawyer-hero > figure,
  .demo-hub-page .demo-site--designer .lawyer-approach > figure,
  .demo-hub-page .demo-site--designer .lawyer-approach > div,
  .demo-hub-page .demo-site--designer .lawyer-consult > div,
  .demo-hub-page .demo-site--designer .lawyer-consult > form,
  .demo-hub-page .demo-site--designer .designer-hero .designer-hero__copy,
  .demo-hub-page .demo-site--designer .designer-hero .designer-hero__image,
  .demo-hub-page .demo-site--designer .designer-case .designer-case__copy,
  .demo-hub-page .demo-site--designer .designer-case .designer-case__images,
  .demo-hub-page .demo-site--designer .designer-fit .designer-fit__intro,
  .demo-hub-page .demo-site--designer .designer-fit .designer-fit__list,
  .demo-hub-page .demo-site--designer .designer-pricing > div,
  .demo-hub-page .demo-site--designer .designer-project > div,
  .demo-hub-page .demo-site--designer .designer-project > form,
  .demo-hub-page .demo-site--designer .bookkeeper-hero .bookkeeper-hero__copy,
  .demo-hub-page .demo-site--designer .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--designer .bookkeeper-report > div,
  .demo-hub-page .demo-site--designer .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--designer .bookkeeper-pricing > figure,
  .demo-hub-page .demo-site--designer .bookkeeper-call > div,
  .demo-hub-page .demo-site--designer .bookkeeper-call > form,
  .demo-hub-page .demo-site--bookkeeper .consultant-problems > header,
  .demo-hub-page .demo-site--bookkeeper .consultant-problems > div,
  .demo-hub-page .demo-site--bookkeeper .consultant-fit > div:first-child,
  .demo-hub-page .demo-site--bookkeeper .consultant-fit > div:nth-child(2),
  .demo-hub-page .demo-site--bookkeeper .consultant-call > div,
  .demo-hub-page .demo-site--bookkeeper .consultant-call > form,
  .demo-hub-page .demo-site--bookkeeper .coach-hero .coach-hero__copy,
  .demo-hub-page .demo-site--bookkeeper .coach-hero > figure,
  .demo-hub-page .demo-site--bookkeeper .coach-for > header,
  .demo-hub-page .demo-site--bookkeeper .coach-for > div,
  .demo-hub-page .demo-site--bookkeeper .coach-method .coach-method__intro,
  .demo-hub-page .demo-site--bookkeeper .coach-method .coach-method__steps,
  .demo-hub-page .demo-site--bookkeeper .coach-about > figure,
  .demo-hub-page .demo-site--bookkeeper .coach-about > div,
  .demo-hub-page .demo-site--bookkeeper .coach-call > div,
  .demo-hub-page .demo-site--bookkeeper .coach-call > form,
  .demo-hub-page .demo-site--bookkeeper .tutor-hero .tutor-hero__copy,
  .demo-hub-page .demo-site--bookkeeper .tutor-hero > figure,
  .demo-hub-page .demo-site--bookkeeper .tutor-approach > div,
  .demo-hub-page .demo-site--bookkeeper .tutor-parents > figure,
  .demo-hub-page .demo-site--bookkeeper .tutor-parents > div,
  .demo-hub-page .demo-site--bookkeeper .tutor-pricing > div,
  .demo-hub-page .demo-site--bookkeeper .tutor-call > div,
  .demo-hub-page .demo-site--bookkeeper .tutor-call > form,
  .demo-hub-page .demo-site--bookkeeper .lawyer-hero .lawyer-hero__copy,
  .demo-hub-page .demo-site--bookkeeper .lawyer-hero > figure,
  .demo-hub-page .demo-site--bookkeeper .lawyer-approach > figure,
  .demo-hub-page .demo-site--bookkeeper .lawyer-approach > div,
  .demo-hub-page .demo-site--bookkeeper .lawyer-consult > div,
  .demo-hub-page .demo-site--bookkeeper .lawyer-consult > form,
  .demo-hub-page .demo-site--bookkeeper .designer-hero .designer-hero__copy,
  .demo-hub-page .demo-site--bookkeeper .designer-hero .designer-hero__image,
  .demo-hub-page .demo-site--bookkeeper .designer-case .designer-case__copy,
  .demo-hub-page .demo-site--bookkeeper .designer-case .designer-case__images,
  .demo-hub-page .demo-site--bookkeeper .designer-fit .designer-fit__intro,
  .demo-hub-page .demo-site--bookkeeper .designer-fit .designer-fit__list,
  .demo-hub-page .demo-site--bookkeeper .designer-pricing > div,
  .demo-hub-page .demo-site--bookkeeper .designer-project > div,
  .demo-hub-page .demo-site--bookkeeper .designer-project > form,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero .bookkeeper-hero__copy,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-hero > figure,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing > figure,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-call > form {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero > aside,
  .demo-hub-page .demo-site--consultant .coach-hero > aside,
  .demo-hub-page .demo-site--consultant .tutor-hero > aside,
  .demo-hub-page .demo-site--consultant .lawyer-hero > aside,
  .demo-hub-page .demo-site--coach .consultant-hero > aside,
  .demo-hub-page .demo-site--coach .coach-hero > aside,
  .demo-hub-page .demo-site--coach .tutor-hero > aside,
  .demo-hub-page .demo-site--coach .lawyer-hero > aside,
  .demo-hub-page .demo-site--tutor .consultant-hero > aside,
  .demo-hub-page .demo-site--tutor .coach-hero > aside,
  .demo-hub-page .demo-site--tutor .tutor-hero > aside,
  .demo-hub-page .demo-site--tutor .lawyer-hero > aside,
  .demo-hub-page .demo-site--lawyer .consultant-hero > aside,
  .demo-hub-page .demo-site--lawyer .coach-hero > aside,
  .demo-hub-page .demo-site--lawyer .tutor-hero > aside,
  .demo-hub-page .demo-site--lawyer .lawyer-hero > aside,
  .demo-hub-page .demo-site--designer .consultant-hero > aside,
  .demo-hub-page .demo-site--designer .coach-hero > aside,
  .demo-hub-page .demo-site--designer .tutor-hero > aside,
  .demo-hub-page .demo-site--designer .lawyer-hero > aside,
  .demo-hub-page .demo-site--bookkeeper .consultant-hero > aside,
  .demo-hub-page .demo-site--bookkeeper .coach-hero > aside,
  .demo-hub-page .demo-site--bookkeeper .tutor-hero > aside,
  .demo-hub-page .demo-site--bookkeeper .lawyer-hero > aside {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: 1rem 0 0;
  }
  .demo-hub-page .demo-site--consultant .consultant-services > div,
  .demo-hub-page .demo-site--consultant .consultant-proof > div,
  .demo-hub-page .demo-site--consultant .coach-options > div,
  .demo-hub-page .demo-site--consultant .designer-services > div,
  .demo-hub-page .demo-site--consultant .bookkeeper-services > div,
  .demo-hub-page .demo-site--consultant .bookkeeper-trust > div,
  .demo-hub-page .demo-site--coach .consultant-services > div,
  .demo-hub-page .demo-site--coach .consultant-proof > div,
  .demo-hub-page .demo-site--coach .coach-options > div,
  .demo-hub-page .demo-site--coach .designer-services > div,
  .demo-hub-page .demo-site--coach .bookkeeper-services > div,
  .demo-hub-page .demo-site--coach .bookkeeper-trust > div,
  .demo-hub-page .demo-site--tutor .consultant-services > div,
  .demo-hub-page .demo-site--tutor .consultant-proof > div,
  .demo-hub-page .demo-site--tutor .coach-options > div,
  .demo-hub-page .demo-site--tutor .designer-services > div,
  .demo-hub-page .demo-site--tutor .bookkeeper-services > div,
  .demo-hub-page .demo-site--tutor .bookkeeper-trust > div,
  .demo-hub-page .demo-site--lawyer .consultant-services > div,
  .demo-hub-page .demo-site--lawyer .consultant-proof > div,
  .demo-hub-page .demo-site--lawyer .coach-options > div,
  .demo-hub-page .demo-site--lawyer .designer-services > div,
  .demo-hub-page .demo-site--lawyer .bookkeeper-services > div,
  .demo-hub-page .demo-site--lawyer .bookkeeper-trust > div,
  .demo-hub-page .demo-site--designer .consultant-services > div,
  .demo-hub-page .demo-site--designer .consultant-proof > div,
  .demo-hub-page .demo-site--designer .coach-options > div,
  .demo-hub-page .demo-site--designer .designer-services > div,
  .demo-hub-page .demo-site--designer .bookkeeper-services > div,
  .demo-hub-page .demo-site--designer .bookkeeper-trust > div,
  .demo-hub-page .demo-site--bookkeeper .consultant-services > div,
  .demo-hub-page .demo-site--bookkeeper .consultant-proof > div,
  .demo-hub-page .demo-site--bookkeeper .coach-options > div,
  .demo-hub-page .demo-site--bookkeeper .designer-services > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust > div {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--consultant .consultant-services article,
  .demo-hub-page .demo-site--consultant .consultant-proof article,
  .demo-hub-page .demo-site--consultant .coach-options article,
  .demo-hub-page .demo-site--consultant .designer-services article,
  .demo-hub-page .demo-site--consultant .bookkeeper-services article,
  .demo-hub-page .demo-site--consultant .bookkeeper-trust article,
  .demo-hub-page .demo-site--coach .consultant-services article,
  .demo-hub-page .demo-site--coach .consultant-proof article,
  .demo-hub-page .demo-site--coach .coach-options article,
  .demo-hub-page .demo-site--coach .designer-services article,
  .demo-hub-page .demo-site--coach .bookkeeper-services article,
  .demo-hub-page .demo-site--coach .bookkeeper-trust article,
  .demo-hub-page .demo-site--tutor .consultant-services article,
  .demo-hub-page .demo-site--tutor .consultant-proof article,
  .demo-hub-page .demo-site--tutor .coach-options article,
  .demo-hub-page .demo-site--tutor .designer-services article,
  .demo-hub-page .demo-site--tutor .bookkeeper-services article,
  .demo-hub-page .demo-site--tutor .bookkeeper-trust article,
  .demo-hub-page .demo-site--lawyer .consultant-services article,
  .demo-hub-page .demo-site--lawyer .consultant-proof article,
  .demo-hub-page .demo-site--lawyer .coach-options article,
  .demo-hub-page .demo-site--lawyer .designer-services article,
  .demo-hub-page .demo-site--lawyer .bookkeeper-services article,
  .demo-hub-page .demo-site--lawyer .bookkeeper-trust article,
  .demo-hub-page .demo-site--designer .consultant-services article,
  .demo-hub-page .demo-site--designer .consultant-proof article,
  .demo-hub-page .demo-site--designer .coach-options article,
  .demo-hub-page .demo-site--designer .designer-services article,
  .demo-hub-page .demo-site--designer .bookkeeper-services article,
  .demo-hub-page .demo-site--designer .bookkeeper-trust article,
  .demo-hub-page .demo-site--bookkeeper .consultant-services article,
  .demo-hub-page .demo-site--bookkeeper .consultant-proof article,
  .demo-hub-page .demo-site--bookkeeper .coach-options article,
  .demo-hub-page .demo-site--bookkeeper .designer-services article,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services article,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust article {
    width: calc(50% - 0.5rem);
  }}@media (max-width: 620px) {
  .demo-hub-page .demo-site:not([class*=demo-site--]) h1,
  .demo-hub-page .demo-site:not([class*=demo-site--]) h2 {
    font-size: clamp(1.9rem, 10vw, 2.55rem) !important;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) h3 {
    font-size: clamp(1.55rem, 8vw, 2.15rem) !important;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) main figure img,
  .demo-hub-page .demo-site:not([class*=demo-site--]) main > section:not(:first-child) figure img {
    max-height: 340px;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero,
  .demo-hub-page .demo-site--coach .consultant-hero,
  .demo-hub-page .demo-site--tutor .consultant-hero,
  .demo-hub-page .demo-site--lawyer .consultant-hero,
  .demo-hub-page .demo-site--designer .consultant-hero,
  .demo-hub-page .demo-site--bookkeeper .consultant-hero {
    min-height: 480px !important;
  }
  .demo-hub-page .demo-site--consultant .consultant-hero .consultant-hero__copy,
  .demo-hub-page .demo-site--coach .consultant-hero .consultant-hero__copy,
  .demo-hub-page .demo-site--tutor .consultant-hero .consultant-hero__copy,
  .demo-hub-page .demo-site--lawyer .consultant-hero .consultant-hero__copy,
  .demo-hub-page .demo-site--designer .consultant-hero .consultant-hero__copy,
  .demo-hub-page .demo-site--bookkeeper .consultant-hero .consultant-hero__copy {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .consultant-problems button,
  .demo-hub-page .demo-site--consultant .coach-method article,
  .demo-hub-page .demo-site--consultant .tutor-help button,
  .demo-hub-page .demo-site--consultant .tutor-approach article,
  .demo-hub-page .demo-site--consultant .designer-case .designer-case__copy article,
  .demo-hub-page .demo-site--consultant .bookkeeper-problem button,
  .demo-hub-page .demo-site--consultant .bookkeeper-report article,
  .demo-hub-page .demo-site--coach .consultant-problems button,
  .demo-hub-page .demo-site--coach .coach-method article,
  .demo-hub-page .demo-site--coach .tutor-help button,
  .demo-hub-page .demo-site--coach .tutor-approach article,
  .demo-hub-page .demo-site--coach .designer-case .designer-case__copy article,
  .demo-hub-page .demo-site--coach .bookkeeper-problem button,
  .demo-hub-page .demo-site--coach .bookkeeper-report article,
  .demo-hub-page .demo-site--tutor .consultant-problems button,
  .demo-hub-page .demo-site--tutor .coach-method article,
  .demo-hub-page .demo-site--tutor .tutor-help button,
  .demo-hub-page .demo-site--tutor .tutor-approach article,
  .demo-hub-page .demo-site--tutor .designer-case .designer-case__copy article,
  .demo-hub-page .demo-site--tutor .bookkeeper-problem button,
  .demo-hub-page .demo-site--tutor .bookkeeper-report article,
  .demo-hub-page .demo-site--lawyer .consultant-problems button,
  .demo-hub-page .demo-site--lawyer .coach-method article,
  .demo-hub-page .demo-site--lawyer .tutor-help button,
  .demo-hub-page .demo-site--lawyer .tutor-approach article,
  .demo-hub-page .demo-site--lawyer .designer-case .designer-case__copy article,
  .demo-hub-page .demo-site--lawyer .bookkeeper-problem button,
  .demo-hub-page .demo-site--lawyer .bookkeeper-report article,
  .demo-hub-page .demo-site--designer .consultant-problems button,
  .demo-hub-page .demo-site--designer .coach-method article,
  .demo-hub-page .demo-site--designer .tutor-help button,
  .demo-hub-page .demo-site--designer .tutor-approach article,
  .demo-hub-page .demo-site--designer .designer-case .designer-case__copy article,
  .demo-hub-page .demo-site--designer .bookkeeper-problem button,
  .demo-hub-page .demo-site--designer .bookkeeper-report article,
  .demo-hub-page .demo-site--bookkeeper .consultant-problems button,
  .demo-hub-page .demo-site--bookkeeper .coach-method article,
  .demo-hub-page .demo-site--bookkeeper .tutor-help button,
  .demo-hub-page .demo-site--bookkeeper .tutor-approach article,
  .demo-hub-page .demo-site--bookkeeper .designer-case .designer-case__copy article,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem button,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-report article {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .consultant-services article,
  .demo-hub-page .demo-site--consultant .consultant-proof article,
  .demo-hub-page .demo-site--consultant .coach-options article,
  .demo-hub-page .demo-site--consultant .lawyer-experience article,
  .demo-hub-page .demo-site--consultant .lawyer-matters article,
  .demo-hub-page .demo-site--consultant .designer-services article,
  .demo-hub-page .demo-site--consultant .bookkeeper-services article,
  .demo-hub-page .demo-site--consultant .bookkeeper-trust article,
  .demo-hub-page .demo-site--coach .consultant-services article,
  .demo-hub-page .demo-site--coach .consultant-proof article,
  .demo-hub-page .demo-site--coach .coach-options article,
  .demo-hub-page .demo-site--coach .lawyer-experience article,
  .demo-hub-page .demo-site--coach .lawyer-matters article,
  .demo-hub-page .demo-site--coach .designer-services article,
  .demo-hub-page .demo-site--coach .bookkeeper-services article,
  .demo-hub-page .demo-site--coach .bookkeeper-trust article,
  .demo-hub-page .demo-site--tutor .consultant-services article,
  .demo-hub-page .demo-site--tutor .consultant-proof article,
  .demo-hub-page .demo-site--tutor .coach-options article,
  .demo-hub-page .demo-site--tutor .lawyer-experience article,
  .demo-hub-page .demo-site--tutor .lawyer-matters article,
  .demo-hub-page .demo-site--tutor .designer-services article,
  .demo-hub-page .demo-site--tutor .bookkeeper-services article,
  .demo-hub-page .demo-site--tutor .bookkeeper-trust article,
  .demo-hub-page .demo-site--lawyer .consultant-services article,
  .demo-hub-page .demo-site--lawyer .consultant-proof article,
  .demo-hub-page .demo-site--lawyer .coach-options article,
  .demo-hub-page .demo-site--lawyer .lawyer-experience article,
  .demo-hub-page .demo-site--lawyer .lawyer-matters article,
  .demo-hub-page .demo-site--lawyer .designer-services article,
  .demo-hub-page .demo-site--lawyer .bookkeeper-services article,
  .demo-hub-page .demo-site--lawyer .bookkeeper-trust article,
  .demo-hub-page .demo-site--designer .consultant-services article,
  .demo-hub-page .demo-site--designer .consultant-proof article,
  .demo-hub-page .demo-site--designer .coach-options article,
  .demo-hub-page .demo-site--designer .lawyer-experience article,
  .demo-hub-page .demo-site--designer .lawyer-matters article,
  .demo-hub-page .demo-site--designer .designer-services article,
  .demo-hub-page .demo-site--designer .bookkeeper-services article,
  .demo-hub-page .demo-site--designer .bookkeeper-trust article,
  .demo-hub-page .demo-site--bookkeeper .consultant-services article,
  .demo-hub-page .demo-site--bookkeeper .consultant-proof article,
  .demo-hub-page .demo-site--bookkeeper .coach-options article,
  .demo-hub-page .demo-site--bookkeeper .lawyer-experience article,
  .demo-hub-page .demo-site--bookkeeper .lawyer-matters article,
  .demo-hub-page .demo-site--bookkeeper .designer-services article,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-services article,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-trust article {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .consultant-process > div,
  .demo-hub-page .demo-site--consultant .tutor-subjects > div,
  .demo-hub-page .demo-site--consultant .lawyer-process > div,
  .demo-hub-page .demo-site--consultant .designer-process > div,
  .demo-hub-page .demo-site--consultant .bookkeeper-process > div,
  .demo-hub-page .demo-site--consultant .designer-case .designer-case__images,
  .demo-hub-page .demo-site--coach .consultant-process > div,
  .demo-hub-page .demo-site--coach .tutor-subjects > div,
  .demo-hub-page .demo-site--coach .lawyer-process > div,
  .demo-hub-page .demo-site--coach .designer-process > div,
  .demo-hub-page .demo-site--coach .bookkeeper-process > div,
  .demo-hub-page .demo-site--coach .designer-case .designer-case__images,
  .demo-hub-page .demo-site--tutor .consultant-process > div,
  .demo-hub-page .demo-site--tutor .tutor-subjects > div,
  .demo-hub-page .demo-site--tutor .lawyer-process > div,
  .demo-hub-page .demo-site--tutor .designer-process > div,
  .demo-hub-page .demo-site--tutor .bookkeeper-process > div,
  .demo-hub-page .demo-site--tutor .designer-case .designer-case__images,
  .demo-hub-page .demo-site--lawyer .consultant-process > div,
  .demo-hub-page .demo-site--lawyer .tutor-subjects > div,
  .demo-hub-page .demo-site--lawyer .lawyer-process > div,
  .demo-hub-page .demo-site--lawyer .designer-process > div,
  .demo-hub-page .demo-site--lawyer .bookkeeper-process > div,
  .demo-hub-page .demo-site--lawyer .designer-case .designer-case__images,
  .demo-hub-page .demo-site--designer .consultant-process > div,
  .demo-hub-page .demo-site--designer .tutor-subjects > div,
  .demo-hub-page .demo-site--designer .lawyer-process > div,
  .demo-hub-page .demo-site--designer .designer-process > div,
  .demo-hub-page .demo-site--designer .bookkeeper-process > div,
  .demo-hub-page .demo-site--designer .designer-case .designer-case__images,
  .demo-hub-page .demo-site--bookkeeper .consultant-process > div,
  .demo-hub-page .demo-site--bookkeeper .tutor-subjects > div,
  .demo-hub-page .demo-site--bookkeeper .lawyer-process > div,
  .demo-hub-page .demo-site--bookkeeper .designer-process > div,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-process > div,
  .demo-hub-page .demo-site--bookkeeper .designer-case .designer-case__images {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--consultant .consultant-process button,
  .demo-hub-page .demo-site--consultant .tutor-subjects button,
  .demo-hub-page .demo-site--consultant .lawyer-process button,
  .demo-hub-page .demo-site--consultant .designer-process button,
  .demo-hub-page .demo-site--consultant .bookkeeper-process button,
  .demo-hub-page .demo-site--consultant .designer-case .designer-case__images figure:first-child,
  .demo-hub-page .demo-site--consultant .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--coach .consultant-process button,
  .demo-hub-page .demo-site--coach .tutor-subjects button,
  .demo-hub-page .demo-site--coach .lawyer-process button,
  .demo-hub-page .demo-site--coach .designer-process button,
  .demo-hub-page .demo-site--coach .bookkeeper-process button,
  .demo-hub-page .demo-site--coach .designer-case .designer-case__images figure:first-child,
  .demo-hub-page .demo-site--coach .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--tutor .consultant-process button,
  .demo-hub-page .demo-site--tutor .tutor-subjects button,
  .demo-hub-page .demo-site--tutor .lawyer-process button,
  .demo-hub-page .demo-site--tutor .designer-process button,
  .demo-hub-page .demo-site--tutor .bookkeeper-process button,
  .demo-hub-page .demo-site--tutor .designer-case .designer-case__images figure:first-child,
  .demo-hub-page .demo-site--tutor .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--lawyer .consultant-process button,
  .demo-hub-page .demo-site--lawyer .tutor-subjects button,
  .demo-hub-page .demo-site--lawyer .lawyer-process button,
  .demo-hub-page .demo-site--lawyer .designer-process button,
  .demo-hub-page .demo-site--lawyer .bookkeeper-process button,
  .demo-hub-page .demo-site--lawyer .designer-case .designer-case__images figure:first-child,
  .demo-hub-page .demo-site--lawyer .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--designer .consultant-process button,
  .demo-hub-page .demo-site--designer .tutor-subjects button,
  .demo-hub-page .demo-site--designer .lawyer-process button,
  .demo-hub-page .demo-site--designer .designer-process button,
  .demo-hub-page .demo-site--designer .bookkeeper-process button,
  .demo-hub-page .demo-site--designer .designer-case .designer-case__images figure:first-child,
  .demo-hub-page .demo-site--designer .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--bookkeeper .consultant-process button,
  .demo-hub-page .demo-site--bookkeeper .tutor-subjects button,
  .demo-hub-page .demo-site--bookkeeper .lawyer-process button,
  .demo-hub-page .demo-site--bookkeeper .designer-process button,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-process button,
  .demo-hub-page .demo-site--bookkeeper .designer-case .designer-case__images figure:first-child,
  .demo-hub-page .demo-site--bookkeeper .designer-case .designer-case__images figure:last-child {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--coach .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--tutor .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--lawyer .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--designer .designer-case .designer-case__images figure:last-child,
  .demo-hub-page .demo-site--bookkeeper .designer-case .designer-case__images figure:last-child {
    height: 220px;
    margin-top: 0;
  }
  .demo-hub-page .demo-site--consultant .lawyer-services article,
  .demo-hub-page .demo-site--coach .lawyer-services article,
  .demo-hub-page .demo-site--tutor .lawyer-services article,
  .demo-hub-page .demo-site--lawyer .lawyer-services article,
  .demo-hub-page .demo-site--designer .lawyer-services article,
  .demo-hub-page .demo-site--bookkeeper .lawyer-services article {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--consultant .lawyer-services article > span,
  .demo-hub-page .demo-site--consultant .lawyer-services article h4,
  .demo-hub-page .demo-site--consultant .lawyer-services article p,
  .demo-hub-page .demo-site--consultant .lawyer-services article button,
  .demo-hub-page .demo-site--coach .lawyer-services article > span,
  .demo-hub-page .demo-site--coach .lawyer-services article h4,
  .demo-hub-page .demo-site--coach .lawyer-services article p,
  .demo-hub-page .demo-site--coach .lawyer-services article button,
  .demo-hub-page .demo-site--tutor .lawyer-services article > span,
  .demo-hub-page .demo-site--tutor .lawyer-services article h4,
  .demo-hub-page .demo-site--tutor .lawyer-services article p,
  .demo-hub-page .demo-site--tutor .lawyer-services article button,
  .demo-hub-page .demo-site--lawyer .lawyer-services article > span,
  .demo-hub-page .demo-site--lawyer .lawyer-services article h4,
  .demo-hub-page .demo-site--lawyer .lawyer-services article p,
  .demo-hub-page .demo-site--lawyer .lawyer-services article button,
  .demo-hub-page .demo-site--designer .lawyer-services article > span,
  .demo-hub-page .demo-site--designer .lawyer-services article h4,
  .demo-hub-page .demo-site--designer .lawyer-services article p,
  .demo-hub-page .demo-site--designer .lawyer-services article button,
  .demo-hub-page .demo-site--bookkeeper .lawyer-services article > span,
  .demo-hub-page .demo-site--bookkeeper .lawyer-services article h4,
  .demo-hub-page .demo-site--bookkeeper .lawyer-services article p,
  .demo-hub-page .demo-site--bookkeeper .lawyer-services article button {
    width: 100%;
  }
  .demo-hub-page .demo-site--consultant .bookkeeper-problem button,
  .demo-hub-page .demo-site--coach .bookkeeper-problem button,
  .demo-hub-page .demo-site--tutor .bookkeeper-problem button,
  .demo-hub-page .demo-site--lawyer .bookkeeper-problem button,
  .demo-hub-page .demo-site--designer .bookkeeper-problem button,
  .demo-hub-page .demo-site--bookkeeper .bookkeeper-problem button {
    min-height: 112px !important;
  }}
/* Final cascade lock — intentionally last in the file. */
.demo-hub-page .demo-site:not([class*=demo-site--]) section {
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 60px clamp(2.5rem, 5vw, 5rem) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) a {
  border-radius: var(--demo-radius, 4px) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) button,
.demo-hub-page .demo-site:not([class*=demo-site--]) [type=button],
.demo-hub-page .demo-site:not([class*=demo-site--]) [type=submit] {
  width: auto;
  height: auto !important;
  min-height: 42px !important;
  padding: 0.68rem 1rem !important;
  border: 1px solid currentColor !important;
  border-radius: var(--demo-radius, 4px) !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) button::before,
.demo-hub-page .demo-site:not([class*=demo-site--]) button::after {
  display: none !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section figure {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  border-radius: var(--demo-radius, 4px) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section article figure {
  height: clamp(160px, 18vw, 230px) !important;
  max-height: 230px !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section figure img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > figure {
  align-self: stretch !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > figure img {
  min-height: 100%;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section > header,
.demo-hub-page .demo-site:not([class*=demo-site--]) section > div,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__copy],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__content],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__intro],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__lead] {
  max-width: none !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section h2,
.demo-hub-page .demo-site:not([class*=demo-site--]) section h3,
.demo-hub-page .demo-site:not([class*=demo-site--]) section h4,
.demo-hub-page .demo-site:not([class*=demo-site--]) section p {
  max-width: 100% !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section article {
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: var(--demo-radius, 4px) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section form,
.demo-hub-page .demo-site:not([class*=demo-site--]) section input,
.demo-hub-page .demo-site:not([class*=demo-site--]) section select,
.demo-hub-page .demo-site:not([class*=demo-site--]) section textarea {
  border-radius: var(--demo-radius, 4px) !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images],
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] {
  display: flex;
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__images] > figure,
.demo-hub-page .demo-site:not([class*=demo-site--]) section [class$=__gallery] > figure {
  height: auto !important;
  min-height: 240px;
  max-height: none !important;
  margin: 0 !important;
  flex: 1 1 0;
  align-self: stretch;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site--consultant main > section,
.demo-hub-page .demo-site--coach main > section,
.demo-hub-page .demo-site--tutor main > section,
.demo-hub-page .demo-site--lawyer main > section,
.demo-hub-page .demo-site--designer main > section,
.demo-hub-page .demo-site--bookkeeper main > section {
  padding-block: 60px !important;
}

.demo-hub-page .demo-site--consultant .consultant-services figure,
.demo-hub-page .demo-site--consultant .consultant-call figure,
.demo-hub-page .demo-site--consultant .coach-hero > figure,
.demo-hub-page .demo-site--consultant .coach-method figure,
.demo-hub-page .demo-site--consultant .coach-about figure,
.demo-hub-page .demo-site--consultant .coach-call figure,
.demo-hub-page .demo-site--consultant .tutor-hero > figure,
.demo-hub-page .demo-site--consultant .tutor-approach figure,
.demo-hub-page .demo-site--consultant .tutor-parents figure,
.demo-hub-page .demo-site--consultant .tutor-call figure,
.demo-hub-page .demo-site--consultant .lawyer-hero > figure,
.demo-hub-page .demo-site--consultant .lawyer-approach > figure,
.demo-hub-page .demo-site--consultant .lawyer-consult figure,
.demo-hub-page .demo-site--consultant .designer-case__images figure,
.demo-hub-page .demo-site--consultant .designer-services figure,
.demo-hub-page .demo-site--consultant .designer-fit figure,
.demo-hub-page .demo-site--consultant .designer-project figure,
.demo-hub-page .demo-site--consultant .bookkeeper-services figure,
.demo-hub-page .demo-site--consultant .bookkeeper-pricing figure,
.demo-hub-page .demo-site--consultant .bookkeeper-call figure,
.demo-hub-page .demo-site--coach .consultant-services figure,
.demo-hub-page .demo-site--coach .consultant-call figure,
.demo-hub-page .demo-site--coach .coach-hero > figure,
.demo-hub-page .demo-site--coach .coach-method figure,
.demo-hub-page .demo-site--coach .coach-about figure,
.demo-hub-page .demo-site--coach .coach-call figure,
.demo-hub-page .demo-site--coach .tutor-hero > figure,
.demo-hub-page .demo-site--coach .tutor-approach figure,
.demo-hub-page .demo-site--coach .tutor-parents figure,
.demo-hub-page .demo-site--coach .tutor-call figure,
.demo-hub-page .demo-site--coach .lawyer-hero > figure,
.demo-hub-page .demo-site--coach .lawyer-approach > figure,
.demo-hub-page .demo-site--coach .lawyer-consult figure,
.demo-hub-page .demo-site--coach .designer-case__images figure,
.demo-hub-page .demo-site--coach .designer-services figure,
.demo-hub-page .demo-site--coach .designer-fit figure,
.demo-hub-page .demo-site--coach .designer-project figure,
.demo-hub-page .demo-site--coach .bookkeeper-services figure,
.demo-hub-page .demo-site--coach .bookkeeper-pricing figure,
.demo-hub-page .demo-site--coach .bookkeeper-call figure,
.demo-hub-page .demo-site--tutor .consultant-services figure,
.demo-hub-page .demo-site--tutor .consultant-call figure,
.demo-hub-page .demo-site--tutor .coach-hero > figure,
.demo-hub-page .demo-site--tutor .coach-method figure,
.demo-hub-page .demo-site--tutor .coach-about figure,
.demo-hub-page .demo-site--tutor .coach-call figure,
.demo-hub-page .demo-site--tutor .tutor-hero > figure,
.demo-hub-page .demo-site--tutor .tutor-approach figure,
.demo-hub-page .demo-site--tutor .tutor-parents figure,
.demo-hub-page .demo-site--tutor .tutor-call figure,
.demo-hub-page .demo-site--tutor .lawyer-hero > figure,
.demo-hub-page .demo-site--tutor .lawyer-approach > figure,
.demo-hub-page .demo-site--tutor .lawyer-consult figure,
.demo-hub-page .demo-site--tutor .designer-case__images figure,
.demo-hub-page .demo-site--tutor .designer-services figure,
.demo-hub-page .demo-site--tutor .designer-fit figure,
.demo-hub-page .demo-site--tutor .designer-project figure,
.demo-hub-page .demo-site--tutor .bookkeeper-services figure,
.demo-hub-page .demo-site--tutor .bookkeeper-pricing figure,
.demo-hub-page .demo-site--tutor .bookkeeper-call figure,
.demo-hub-page .demo-site--lawyer .consultant-services figure,
.demo-hub-page .demo-site--lawyer .consultant-call figure,
.demo-hub-page .demo-site--lawyer .coach-hero > figure,
.demo-hub-page .demo-site--lawyer .coach-method figure,
.demo-hub-page .demo-site--lawyer .coach-about figure,
.demo-hub-page .demo-site--lawyer .coach-call figure,
.demo-hub-page .demo-site--lawyer .tutor-hero > figure,
.demo-hub-page .demo-site--lawyer .tutor-approach figure,
.demo-hub-page .demo-site--lawyer .tutor-parents figure,
.demo-hub-page .demo-site--lawyer .tutor-call figure,
.demo-hub-page .demo-site--lawyer .lawyer-hero > figure,
.demo-hub-page .demo-site--lawyer .lawyer-approach > figure,
.demo-hub-page .demo-site--lawyer .lawyer-consult figure,
.demo-hub-page .demo-site--lawyer .designer-case__images figure,
.demo-hub-page .demo-site--lawyer .designer-services figure,
.demo-hub-page .demo-site--lawyer .designer-fit figure,
.demo-hub-page .demo-site--lawyer .designer-project figure,
.demo-hub-page .demo-site--lawyer .bookkeeper-services figure,
.demo-hub-page .demo-site--lawyer .bookkeeper-pricing figure,
.demo-hub-page .demo-site--lawyer .bookkeeper-call figure,
.demo-hub-page .demo-site--designer .consultant-services figure,
.demo-hub-page .demo-site--designer .consultant-call figure,
.demo-hub-page .demo-site--designer .coach-hero > figure,
.demo-hub-page .demo-site--designer .coach-method figure,
.demo-hub-page .demo-site--designer .coach-about figure,
.demo-hub-page .demo-site--designer .coach-call figure,
.demo-hub-page .demo-site--designer .tutor-hero > figure,
.demo-hub-page .demo-site--designer .tutor-approach figure,
.demo-hub-page .demo-site--designer .tutor-parents figure,
.demo-hub-page .demo-site--designer .tutor-call figure,
.demo-hub-page .demo-site--designer .lawyer-hero > figure,
.demo-hub-page .demo-site--designer .lawyer-approach > figure,
.demo-hub-page .demo-site--designer .lawyer-consult figure,
.demo-hub-page .demo-site--designer .designer-case__images figure,
.demo-hub-page .demo-site--designer .designer-services figure,
.demo-hub-page .demo-site--designer .designer-fit figure,
.demo-hub-page .demo-site--designer .designer-project figure,
.demo-hub-page .demo-site--designer .bookkeeper-services figure,
.demo-hub-page .demo-site--designer .bookkeeper-pricing figure,
.demo-hub-page .demo-site--designer .bookkeeper-call figure,
.demo-hub-page .demo-site--bookkeeper .consultant-services figure,
.demo-hub-page .demo-site--bookkeeper .consultant-call figure,
.demo-hub-page .demo-site--bookkeeper .coach-hero > figure,
.demo-hub-page .demo-site--bookkeeper .coach-method figure,
.demo-hub-page .demo-site--bookkeeper .coach-about figure,
.demo-hub-page .demo-site--bookkeeper .coach-call figure,
.demo-hub-page .demo-site--bookkeeper .tutor-hero > figure,
.demo-hub-page .demo-site--bookkeeper .tutor-approach figure,
.demo-hub-page .demo-site--bookkeeper .tutor-parents figure,
.demo-hub-page .demo-site--bookkeeper .tutor-call figure,
.demo-hub-page .demo-site--bookkeeper .lawyer-hero > figure,
.demo-hub-page .demo-site--bookkeeper .lawyer-approach > figure,
.demo-hub-page .demo-site--bookkeeper .lawyer-consult figure,
.demo-hub-page .demo-site--bookkeeper .designer-case__images figure,
.demo-hub-page .demo-site--bookkeeper .designer-services figure,
.demo-hub-page .demo-site--bookkeeper .designer-fit figure,
.demo-hub-page .demo-site--bookkeeper .designer-project figure,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-services figure,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-pricing figure,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call figure {
  max-height: none !important;
}

.demo-hub-page .demo-site--consultant .consultant-problems button,
.demo-hub-page .demo-site--consultant .consultant-process button,
.demo-hub-page .demo-site--consultant .coach-for button,
.demo-hub-page .demo-site--consultant .tutor-help button,
.demo-hub-page .demo-site--consultant .tutor-subjects button,
.demo-hub-page .demo-site--consultant .lawyer-process button,
.demo-hub-page .demo-site--consultant .designer-work__tabs button,
.demo-hub-page .demo-site--consultant .designer-process button,
.demo-hub-page .demo-site--consultant .bookkeeper-process button,
.demo-hub-page .demo-site--coach .consultant-problems button,
.demo-hub-page .demo-site--coach .consultant-process button,
.demo-hub-page .demo-site--coach .coach-for button,
.demo-hub-page .demo-site--coach .tutor-help button,
.demo-hub-page .demo-site--coach .tutor-subjects button,
.demo-hub-page .demo-site--coach .lawyer-process button,
.demo-hub-page .demo-site--coach .designer-work__tabs button,
.demo-hub-page .demo-site--coach .designer-process button,
.demo-hub-page .demo-site--coach .bookkeeper-process button,
.demo-hub-page .demo-site--tutor .consultant-problems button,
.demo-hub-page .demo-site--tutor .consultant-process button,
.demo-hub-page .demo-site--tutor .coach-for button,
.demo-hub-page .demo-site--tutor .tutor-help button,
.demo-hub-page .demo-site--tutor .tutor-subjects button,
.demo-hub-page .demo-site--tutor .lawyer-process button,
.demo-hub-page .demo-site--tutor .designer-work__tabs button,
.demo-hub-page .demo-site--tutor .designer-process button,
.demo-hub-page .demo-site--tutor .bookkeeper-process button,
.demo-hub-page .demo-site--lawyer .consultant-problems button,
.demo-hub-page .demo-site--lawyer .consultant-process button,
.demo-hub-page .demo-site--lawyer .coach-for button,
.demo-hub-page .demo-site--lawyer .tutor-help button,
.demo-hub-page .demo-site--lawyer .tutor-subjects button,
.demo-hub-page .demo-site--lawyer .lawyer-process button,
.demo-hub-page .demo-site--lawyer .designer-work__tabs button,
.demo-hub-page .demo-site--lawyer .designer-process button,
.demo-hub-page .demo-site--lawyer .bookkeeper-process button,
.demo-hub-page .demo-site--designer .consultant-problems button,
.demo-hub-page .demo-site--designer .consultant-process button,
.demo-hub-page .demo-site--designer .coach-for button,
.demo-hub-page .demo-site--designer .tutor-help button,
.demo-hub-page .demo-site--designer .tutor-subjects button,
.demo-hub-page .demo-site--designer .lawyer-process button,
.demo-hub-page .demo-site--designer .designer-work__tabs button,
.demo-hub-page .demo-site--designer .designer-process button,
.demo-hub-page .demo-site--designer .bookkeeper-process button,
.demo-hub-page .demo-site--bookkeeper .consultant-problems button,
.demo-hub-page .demo-site--bookkeeper .consultant-process button,
.demo-hub-page .demo-site--bookkeeper .coach-for button,
.demo-hub-page .demo-site--bookkeeper .tutor-help button,
.demo-hub-page .demo-site--bookkeeper .tutor-subjects button,
.demo-hub-page .demo-site--bookkeeper .lawyer-process button,
.demo-hub-page .demo-site--bookkeeper .designer-work__tabs button,
.demo-hub-page .demo-site--bookkeeper .designer-process button,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-process button {
  min-height: 58px !important;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--consultant .lawyer-consult form,
.demo-hub-page .demo-site--consultant .bookkeeper-call form,
.demo-hub-page .demo-site--coach .lawyer-consult form,
.demo-hub-page .demo-site--coach .bookkeeper-call form,
.demo-hub-page .demo-site--tutor .lawyer-consult form,
.demo-hub-page .demo-site--tutor .bookkeeper-call form,
.demo-hub-page .demo-site--lawyer .lawyer-consult form,
.demo-hub-page .demo-site--lawyer .bookkeeper-call form,
.demo-hub-page .demo-site--designer .lawyer-consult form,
.demo-hub-page .demo-site--designer .bookkeeper-call form,
.demo-hub-page .demo-site--bookkeeper .lawyer-consult form,
.demo-hub-page .demo-site--bookkeeper .bookkeeper-call form {
  max-height: 82vh;
  overflow: auto;
}

.demo-hub-page .pottery-editorial,
.demo-hub-page .photo-story-list,
.demo-hub-page .jewel-editorial,
.demo-hub-page .bake-products,
.demo-hub-page .flower-editorial,
.demo-hub-page .flower-products,
.demo-hub-page .artist-editorial,
.demo-hub-page .artist-products,
.demo-hub-page .boutique-editorial,
.demo-hub-page .boutique-products,
.demo-hub-page .contractor-projects,
.demo-hub-page .contractor-service-list,
.demo-hub-page .cleaning-service-list,
.demo-hub-page .landscape-project-strip,
.demo-hub-page .landscape-service-list,
.demo-hub-page .plumbing-service-list,
.demo-hub-page .auto-service-list,
.demo-hub-page .grooming-service-list,
.demo-hub-page .salon-service-list,
.demo-hub-page .consultant-services > div,
.demo-hub-page .coach-options > div,
.demo-hub-page .tutor-approach,
.demo-hub-page .lawyer-approach,
.demo-hub-page .designer-case,
.demo-hub-page .bookkeeper-services > div {
  gap: 0 !important;
  align-items: stretch !important;
}

.demo-hub-page .pottery-product--tall {
  margin-top: 0 !important;
}@media (max-width: 760px) {
  .demo-hub-page .demo-site:not([class*=demo-site--]) section {
    max-height: none;
    padding: 40px 1rem !important;
    overflow: visible;
  }
  .demo-hub-page .demo-site:not([class*=demo-site--]) section figure,
  .demo-hub-page .demo-site:not([class*=demo-site--]) section article figure {
    max-height: 320px !important;
  }}
/* Pottery audit — isolated final rules for the Common Clay demo. */
.demo-hub-page .demo-site--pottery {
  --demo-radius: 4px;
  background: #f0ece3;
  color: #29231d;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--pottery .pottery-site {
  background: #f0ece3;
}

.demo-hub-page .demo-site--pottery .pottery-site section {
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 60px !important;
  overflow: visible !important;
}

.demo-hub-page .demo-site--pottery .pottery-site section > header,
.demo-hub-page .demo-site--pottery .pottery-site section > div,
.demo-hub-page .demo-site--pottery .pottery-site section [class$=__copy],
.demo-hub-page .demo-site--pottery .pottery-site section [class$=__content] {
  max-width: none !important;
}

.demo-hub-page .demo-site--pottery .pottery-site h2,
.demo-hub-page .demo-site--pottery .pottery-site h3,
.demo-hub-page .demo-site--pottery .pottery-site h4,
.demo-hub-page .demo-site--pottery .pottery-site .pottery-product span,
.demo-hub-page .demo-site--pottery .pottery-site .pottery-shop-card > div > p,
.demo-hub-page .demo-site--pottery .pottery-site .pottery-commerce-notes strong,
.demo-hub-page .demo-site--pottery .pottery-site .pottery-find__details strong,
.demo-hub-page .demo-site--pottery .pottery-site .pottery-hero__visual figcaption strong,
.demo-hub-page .demo-site--pottery .pottery-site .pottery-nav__brand strong,
.demo-hub-page .demo-site--pottery .pottery-site .pottery-footer strong {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-weight: 400;
}

.demo-hub-page .demo-site--pottery .pottery-site section h2,
.demo-hub-page .demo-site--pottery .pottery-site section h3 {
  max-width: none !important;
  font-size: clamp(36px, 3.5vw, 48px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em;
}

.demo-hub-page .demo-site--pottery .pottery-site section p,
.demo-hub-page .demo-site--pottery .pottery-site section small {
  max-width: none !important;
}

.demo-hub-page .demo-site--pottery .pottery-site button {
  width: auto;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid #29231d !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--pottery .pottery-nav {
  min-height: 76px;
  padding: 0 60px;
}

.demo-hub-page .demo-site--pottery .pottery-nav > button {
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
  color: #29231d;
}

.demo-hub-page .demo-site--pottery .pottery-nav > button span {
  border-radius: 50% !important;
}

.demo-hub-page .demo-site--pottery .pottery-hero {
  display: flex;
  align-items: stretch !important;
  gap: 40px;
  border-bottom: 1px solid rgba(41, 35, 29, 0.22);
}

.demo-hub-page .demo-site--pottery .pottery-hero__copy {
  display: flex;
  width: calc(40% - 20px);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-hero__copy h2 {
  width: 100%;
  margin: 0;
}

.demo-hub-page .demo-site--pottery .pottery-overline {
  margin: 0 0 18px;
}

.demo-hub-page .demo-site--pottery .pottery-hero__intro {
  width: 100%;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--pottery .pottery-actions {
  gap: 12px !important;
  margin-top: 28px;
}

.demo-hub-page .demo-site--pottery .pottery-actions .pottery-link-button {
  padding: 0 18px !important;
  border: 1px solid #29231d !important;
  background: transparent;
  color: #29231d;
}

.demo-hub-page .demo-site--pottery .pottery-hero__meta {
  margin-top: 28px;
}

.demo-hub-page .demo-site--pottery .pottery-hero__visual {
  width: calc(60% - 20px);
  min-height: 500px !important;
  margin: 0;
  align-self: stretch !important;
  aspect-ratio: auto !important;
  border-radius: 4px !important;
}

.demo-hub-page .demo-site--pottery .pottery-hero__visual img {
  height: 100% !important;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.demo-hub-page .demo-site--pottery .pottery-hero__visual figcaption {
  right: 20px;
  bottom: 20px;
  padding: 16px;
  border-radius: 4px;
}

.demo-hub-page .demo-site--pottery .pottery-material-strip {
  min-height: 64px;
  padding: 16px 60px;
}

.demo-hub-page .demo-site--pottery .pottery-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-section-heading > p {
  width: 150px;
  flex: 0 0 150px;
}

.demo-hub-page .demo-site--pottery .pottery-section-heading > div {
  width: auto;
  max-width: none !important;
  flex: 1 1 auto;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-section-heading h3,
.demo-hub-page .demo-site--pottery .pottery-shop__header h3 {
  margin: 0 0 16px;
}

.demo-hub-page .demo-site--pottery .pottery-section-heading div p {
  width: 100%;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

.demo-hub-page .demo-site--pottery .pottery-products {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch !important;
  gap: 20px !important;
  margin-top: 40px;
  padding: 0 !important;
  background: transparent;
  border: 0;
}

.demo-hub-page .demo-site--pottery .pottery-product,
.demo-hub-page .demo-site--pottery .pottery-product--tall,
.demo-hub-page .demo-site--pottery .pottery-product--wide {
  display: flex;
  min-width: 220px;
  flex: 1 1 calc(25% - 15px);
  flex-direction: column;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(41, 35, 29, 0.2);
  border-radius: 4px !important;
  background: #f8f5ee;
}

.demo-hub-page .demo-site--pottery .pottery-product figure,
.demo-hub-page .demo-site--pottery .pottery-product--wide figure {
  width: 100%;
  height: clamp(190px, 17vw, 250px) !important;
  max-height: 250px !important;
  margin: 0;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-product > div {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 20px !important;
}

.demo-hub-page .demo-site--pottery .pottery-product small {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.demo-hub-page .demo-site--pottery .pottery-product b {
  margin-top: 14px;
}

.demo-hub-page .demo-site--pottery .pottery-product__actions,
.demo-hub-page .demo-site--pottery .pottery-shop-card__actions {
  display: flex;
  width: 100%;
  gap: 8px !important;
  margin-top: auto;
  padding: 18px 0 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-product__actions button,
.demo-hub-page .demo-site--pottery .pottery-shop-card__actions button {
  min-height: 40px !important;
  flex: 1 1 0;
  padding: 0 12px !important;
}

.demo-hub-page .demo-site--pottery .pottery-outline-button {
  margin: 28px 0 0 auto;
}

.demo-hub-page .demo-site--pottery .pottery-shop__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-shop__header > div:first-child {
  flex: 1 1 auto;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-shop__filters {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-shop__filters button {
  min-height: 38px !important;
  padding: 0 14px !important;
}

.demo-hub-page .demo-site--pottery .pottery-shop__catalogue {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px !important;
  margin-top: 36px;
  padding: 0 !important;
  border: 0;
  background: transparent;
}

.demo-hub-page .demo-site--pottery .pottery-shop-card {
  display: flex;
  width: calc((100% - 60px) / 4);
  min-width: 220px;
  flex: 0 0 calc((100% - 60px) / 4);
  flex-direction: column;
  padding: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(41, 35, 29, 0.2);
  border-radius: 4px !important;
  background: #f8f5ee;
}

.demo-hub-page .demo-site--pottery .pottery-shop-card:nth-child(n+5) {
  width: calc((100% - 20px) / 2);
  flex-basis: calc((100% - 20px) / 2);
}

.demo-hub-page .demo-site--pottery .pottery-shop-card figure {
  width: 100%;
  height: clamp(160px, 12vw, 210px) !important;
  max-height: 210px !important;
  margin: 0;
  aspect-ratio: auto !important;
  border-radius: 2px !important;
}

.demo-hub-page .demo-site--pottery .pottery-shop-card > div:not(.pottery-shop-card__actions) {
  width: 100%;
  padding: 16px 0 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-commerce-notes {
  display: flex;
  align-items: stretch;
  gap: 16px;
  background: #ddd6c9;
}

.demo-hub-page .demo-site--pottery .pottery-commerce-notes article {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  gap: 12px;
  padding: 0 16px 0 0;
  border-right: 1px solid rgba(41, 35, 29, 0.22);
}

.demo-hub-page .demo-site--pottery .pottery-commerce-notes article:last-child {
  padding-right: 0;
  border-right: 0;
}

.demo-hub-page .demo-site--pottery .pottery-editorial {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch !important;
  gap: 16px !important;
  background: #2d332b;
  color: #f0ece3;
}

.demo-hub-page .demo-site--pottery .pottery-editorial .pottery-editorial__large {
  width: calc(62% - 8px);
  height: 300px !important;
  min-height: 0 !important;
  flex: 0 0 calc(62% - 8px);
}

.demo-hub-page .demo-site--pottery .pottery-editorial__statement {
  display: flex;
  width: calc(38% - 8px);
  flex: 0 0 calc(38% - 8px);
  flex-direction: column;
  justify-content: space-between;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-editorial__statement p {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: 1.08;
}

.demo-hub-page .demo-site--pottery .pottery-editorial figure:nth-of-type(n + 2) {
  width: calc((100% - 64px) / 5);
  height: 160px !important;
  min-height: 0 !important;
  flex: 0 0 calc((100% - 64px) / 5);
  margin: 0;
}

.demo-hub-page .demo-site--pottery .pottery-editorial figure,
.demo-hub-page .demo-site--pottery .pottery-editorial figure img {
  border-radius: 4px !important;
}

.demo-hub-page .demo-site--pottery .pottery-about {
  display: flex;
  align-items: stretch !important;
  gap: 32px;
}

.demo-hub-page .demo-site--pottery .pottery-about__copy {
  display: flex;
  width: calc(40% - 16px);
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-about__copy > p:not(.pottery-overline) {
  width: 100%;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.65;
}

.demo-hub-page .demo-site--pottery .pottery-about__images {
  display: flex;
  width: calc(60% - 16px);
  min-height: 380px;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-about__images figure,
.demo-hub-page .demo-site--pottery .pottery-about__images figure:first-child {
  width: auto;
  height: auto !important;
  min-height: 380px;
  flex: 1 1 0;
  margin: 0;
  border-radius: 4px !important;
}

.demo-hub-page .demo-site--pottery .pottery-find__details {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-top: 32px;
  padding: 24px 0 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-find__details article {
  padding: 0;
}

.demo-hub-page .demo-site--pottery .pottery-find__details button {
  align-self: flex-end;
  margin-left: auto;
}

.demo-hub-page .demo-site--pottery .pottery-find__gallery {
  display: flex;
  align-items: stretch !important;
  gap: 16px !important;
  margin-top: 32px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-find__gallery figure,
.demo-hub-page .demo-site--pottery .pottery-find__gallery figure:nth-child(2) {
  width: auto;
  height: 220px !important;
  min-height: 0;
  flex: 1 1 0;
  margin: 0;
  border-radius: 4px !important;
}

.demo-hub-page .demo-site--pottery .pottery-final {
  display: flex;
  align-items: stretch !important;
  gap: 40px;
  background: #9a4e32;
  color: #f5efe5;
}

.demo-hub-page .demo-site--pottery .pottery-final figure,
.demo-hub-page .demo-site--pottery .pottery-final > div {
  width: calc(50% - 20px);
}

.demo-hub-page .demo-site--pottery .pottery-final figure {
  height: 340px !important;
  min-height: 0 !important;
  margin: 0;
  border-radius: 4px !important;
}

.demo-hub-page .demo-site--pottery .pottery-final > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 !important;
}

.demo-hub-page .demo-site--pottery .pottery-final h3,
.demo-hub-page .demo-site--pottery .pottery-final p {
  color: #f5efe5;
}

.demo-hub-page .demo-site--pottery .pottery-final button {
  margin-top: 24px;
  border-color: #f5efe5 !important;
  background: #f5efe5;
  color: #9a4e32;
}

.demo-hub-page .demo-site--pottery .pottery-footer {
  min-height: 0;
  padding: 36px 60px;
}@media (max-width: 960px) {
  .demo-hub-page .demo-site--pottery .pottery-hero,
  .demo-hub-page .demo-site--pottery .pottery-about,
  .demo-hub-page .demo-site--pottery .pottery-final {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--pottery .pottery-hero__copy,
  .demo-hub-page .demo-site--pottery .pottery-hero__visual,
  .demo-hub-page .demo-site--pottery .pottery-about__copy,
  .demo-hub-page .demo-site--pottery .pottery-about__images,
  .demo-hub-page .demo-site--pottery .pottery-final figure,
  .demo-hub-page .demo-site--pottery .pottery-final > div {
    width: 100%;
  }
  .demo-hub-page .demo-site--pottery .pottery-hero__visual,
  .demo-hub-page .demo-site--pottery .pottery-about__images {
    min-height: 340px !important;
  }
  .demo-hub-page .demo-site--pottery .pottery-product,
  .demo-hub-page .demo-site--pottery .pottery-product--tall,
  .demo-hub-page .demo-site--pottery .pottery-product--wide {
    flex-basis: calc(50% - 10px);
  }
  .demo-hub-page .demo-site--pottery .pottery-shop-card,
  .demo-hub-page .demo-site--pottery .pottery-shop-card:nth-child(n+5) {
    width: calc(50% - 10px);
    flex-basis: calc(50% - 10px);
  }
  .demo-hub-page .demo-site--pottery .pottery-commerce-notes {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--pottery .pottery-commerce-notes article {
    flex-basis: calc(50% - 8px);
  }}@media (max-width: 700px) {
  .demo-hub-page .demo-site--pottery .pottery-site section {
    padding: 60px !important;
  }
  .demo-hub-page .demo-site--pottery .pottery-nav {
    padding: 0 24px;
  }
  .demo-hub-page .demo-site--pottery .pottery-section-heading,
  .demo-hub-page .demo-site--pottery .pottery-shop__header,
  .demo-hub-page .demo-site--pottery .pottery-find__details {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--pottery .pottery-section-heading > p,
  .demo-hub-page .demo-site--pottery .pottery-shop-card,
  .demo-hub-page .demo-site--pottery .pottery-shop-card:nth-child(n+5),
  .demo-hub-page .demo-site--pottery .pottery-product,
  .demo-hub-page .demo-site--pottery .pottery-product--tall,
  .demo-hub-page .demo-site--pottery .pottery-product--wide,
  .demo-hub-page .demo-site--pottery .pottery-commerce-notes article {
    width: 100%;
    flex-basis: 100%;
  }
  .demo-hub-page .demo-site--pottery .pottery-shop__filters {
    justify-content: flex-start;
  }
  .demo-hub-page .demo-site--pottery .pottery-editorial .pottery-editorial__large,
  .demo-hub-page .demo-site--pottery .pottery-editorial__statement,
  .demo-hub-page .demo-site--pottery .pottery-editorial figure:nth-of-type(n + 2) {
    width: 100%;
    flex-basis: 100%;
  }
  .demo-hub-page .demo-site--pottery .pottery-editorial figure:nth-of-type(n + 2) {
    height: 220px !important;
  }
  .demo-hub-page .demo-site--pottery .pottery-about__images,
  .demo-hub-page .demo-site--pottery .pottery-find__gallery {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--pottery .pottery-about__images figure,
  .demo-hub-page .demo-site--pottery .pottery-about__images figure:first-child,
  .demo-hub-page .demo-site--pottery .pottery-find__gallery figure,
  .demo-hub-page .demo-site--pottery .pottery-find__gallery figure:nth-child(2) {
    width: 100%;
    min-height: 260px;
  }
  .demo-hub-page .demo-site--pottery .pottery-footer {
    padding: 36px 60px;
  }}
/* Illustrator audit — isolated final rules for the Maya Rowan demo. */
.demo-hub-page .demo-site--artist {
  --demo-radius: 2px;
  background: #f4f2ec;
  color: #20201c;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--artist .artist-site,
.demo-hub-page .demo-site--artist .artist-hero__gallery,
.demo-hub-page .demo-site--artist .artist-statement,
.demo-hub-page .demo-site--artist .artist-originals,
.demo-hub-page .demo-site--artist .artist-commissions,
.demo-hub-page .demo-site--artist .artist-commissions form,
.demo-hub-page .demo-site--artist .artist-about__portrait {
  background: #f4f2ec !important;
}

.demo-hub-page .demo-site--artist .artist-site section {
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 60px !important;
  overflow: visible !important;
}

.demo-hub-page .demo-site--artist .artist-site section > div,
.demo-hub-page .demo-site--artist .artist-site section > header,
.demo-hub-page .demo-site--artist .artist-site section form,
.demo-hub-page .demo-site--artist .artist-site section [class$=__copy] {
  max-width: none !important;
}

.demo-hub-page .demo-site--artist .artist-site h2,
.demo-hub-page .demo-site--artist .artist-site h3,
.demo-hub-page .demo-site--artist .artist-product > div > p,
.demo-hub-page .demo-site--artist .artist-work__types article > div > p,
.demo-hub-page .demo-site--artist .artist-nav__brand,
.demo-hub-page .demo-site--artist .artist-footer strong {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-weight: 400;
}

.demo-hub-page .demo-site--artist .artist-site section h2,
.demo-hub-page .demo-site--artist .artist-site section h3 {
  max-width: none !important;
  font-size: clamp(36px, 3.5vw, 48px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
}

.demo-hub-page .demo-site--artist .artist-site section p,
.demo-hub-page .demo-site--artist .artist-site section span {
  max-width: none !important;
}

.demo-hub-page .demo-site--artist .artist-site section a,
.demo-hub-page .demo-site--artist .artist-site section button {
  display: inline-flex;
  min-height: 42px !important;
  align-items: center;
  justify-content: center;
  padding: 0 16px !important;
  border: 1px solid currentColor !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--artist .artist-nav {
  min-height: 76px;
  padding: 0 60px;
}

.demo-hub-page .demo-site--artist .artist-nav > button {
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-nav > button span {
  border-radius: 50% !important;
}

.demo-hub-page .demo-site--artist .artist-hero {
  display: flex;
  align-items: stretch !important;
  gap: 32px;
}

.demo-hub-page .demo-site--artist .artist-hero__copy {
  width: calc(42% - 16px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-hero__copy h2 {
  width: 100%;
  margin: 18px 0;
}

.demo-hub-page .demo-site--artist .artist-hero__copy > span {
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--artist .artist-hero__copy > div {
  gap: 10px;
  margin-top: 24px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-hero__gallery {
  width: calc(58% - 16px);
  min-height: 520px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-hero__gallery figure:nth-child(2),
.demo-hub-page .demo-site--artist .artist-hero__gallery figure:nth-child(3) {
  border-color: #f4f2ec;
}

.demo-hub-page .demo-site--artist .artist-statement {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch !important;
  gap: 24px !important;
}

.demo-hub-page .demo-site--artist .artist-statement__copy {
  display: block;
  width: 100%;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-statement__copy > p {
  width: 100%;
  margin: 0 0 16px;
}

.demo-hub-page .demo-site--artist .artist-statement__copy h3 {
  width: 100%;
  margin: 0;
}

.demo-hub-page .demo-site--artist .artist-statement__copy > span {
  display: block;
  width: 100%;
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--artist .artist-statement > figure {
  width: calc(68% - 12px);
  height: 300px !important;
  min-height: 0 !important;
  margin: 0;
  border-radius: 2px !important;
}

.demo-hub-page .demo-site--artist .artist-statement__routes {
  display: flex;
  width: calc(32% - 12px);
  flex-direction: column;
  padding: 0 !important;
  border-top: 1px solid currentColor;
}

.demo-hub-page .demo-site--artist .artist-statement__routes a {
  display: flex;
  min-height: 0 !important;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  text-transform: none;
}

.demo-hub-page .demo-site--artist .artist-statement__routes b {
  font-size: 16px;
}

.demo-hub-page .demo-site--artist .artist-statement__routes span {
  margin-top: 4px;
  font-size: 14px;
}

.demo-hub-page .demo-site--artist .artist-heading {
  display: block;
  margin-bottom: 36px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-heading > p {
  width: 100%;
  margin: 0 0 16px;
}

.demo-hub-page .demo-site--artist .artist-heading h3 {
  width: 100%;
  margin: 0;
}

.demo-hub-page .demo-site--artist .artist-heading > span {
  display: block;
  width: 100%;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--artist .artist-work__types,
.demo-hub-page .demo-site--artist .artist-products {
  gap: 20px !important;
}

.demo-hub-page .demo-site--artist .artist-work__types article {
  width: calc((100% - 40px) / 3);
}

.demo-hub-page .demo-site--artist .artist-work__types article > div {
  min-height: 170px;
  padding: 16px 0 0 !important;
}

.demo-hub-page .demo-site--artist .artist-work__types article > div > p {
  font-size: 28px;
}

.demo-hub-page .demo-site--artist .artist-work__types article > div > a {
  min-height: 36px !important;
  margin-top: 18px;
}

.demo-hub-page .demo-site--artist .artist-originals > header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 36px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-originals > header > div:first-child {
  display: block;
  width: 100%;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-originals > header > div:first-child > p {
  width: 100%;
  margin: 0 0 16px;
}

.demo-hub-page .demo-site--artist .artist-originals > header > div:first-child > h3 {
  width: 100%;
  margin: 0;
}

.demo-hub-page .demo-site--artist .artist-originals > header > div:first-child > span {
  display: block;
  width: 100%;
  margin-top: 18px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--artist .artist-filters {
  gap: 8px;
  margin-left: auto;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-filters button {
  min-height: 36px !important;
}

.demo-hub-page .demo-site--artist .artist-product,
.demo-hub-page .demo-site--artist .artist-product--large {
  width: calc((100% - 40px) / 3);
  flex: 0 0 calc((100% - 40px) / 3);
  margin: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-product > div {
  display: flex;
  padding: 16px 0 0 !important;
}

.demo-hub-page .demo-site--artist .artist-product > div > p {
  font-size: 28px;
}

.demo-hub-page .demo-site--artist .artist-product > div button {
  margin-top: 16px;
}

.demo-hub-page .demo-site--artist .artist-editorial {
  display: flex;
  align-items: stretch !important;
  gap: 16px !important;
  background: #30372e;
}

.demo-hub-page .demo-site--artist .artist-editorial > div {
  width: calc(38% - 11px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-editorial > div h3 {
  margin: 18px 0;
  color: #f4f2ec;
}

.demo-hub-page .demo-site--artist .artist-editorial > div span {
  line-height: 1.6;
}

.demo-hub-page .demo-site--artist .artist-editorial > div a {
  margin-top: 24px;
}

.demo-hub-page .demo-site--artist .artist-editorial figure {
  width: calc(42% - 11px);
  min-height: 420px !important;
  margin: 0;
  border-radius: 2px !important;
}

.demo-hub-page .demo-site--artist .artist-editorial figure:last-child {
  width: calc(20% - 11px);
}

.demo-hub-page .demo-site--artist .artist-commissions {
  display: flex;
  align-items: flex-start !important;
  gap: 48px;
}

.demo-hub-page .demo-site--artist .artist-commissions__intro {
  width: calc(36% - 24px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-commissions__intro h3 {
  margin: 18px 0;
}

.demo-hub-page .demo-site--artist .artist-commissions__intro > span {
  font-size: 16px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--artist .artist-commissions__intro figure {
  display: none;
}

.demo-hub-page .demo-site--artist .artist-commissions form {
  display: flex;
  width: calc(64% - 24px);
  flex-wrap: wrap;
  gap: 16px 20px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-commissions form > div {
  width: 100%;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-commissions form > div h3 {
  margin: 12px 0;
}

.demo-hub-page .demo-site--artist .artist-commissions form label {
  width: calc(50% - 10px);
}

.demo-hub-page .demo-site--artist .artist-commissions form input,
.demo-hub-page .demo-site--artist .artist-commissions form textarea {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-commissions form > button {
  width: 100%;
}

.demo-hub-page .demo-site--artist .artist-about {
  display: flex;
  align-items: stretch !important;
  gap: 40px !important;
}

.demo-hub-page .demo-site--artist .artist-about__portrait {
  width: calc(55% - 20px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-about__portrait figure {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  margin: 0;
  border-radius: 2px !important;
}

.demo-hub-page .demo-site--artist .artist-about__copy {
  width: calc(45% - 20px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-about__copy h3 {
  margin: 14px 0 20px;
}

.demo-hub-page .demo-site--artist .artist-about__copy span {
  width: 100%;
  line-height: 1.6;
}

.demo-hub-page .demo-site--artist .artist-about__copy a {
  margin-top: 18px;
}

.demo-hub-page .demo-site--artist .artist-final {
  display: flex;
  align-items: stretch !important;
  gap: 40px !important;
  background: #20201c;
}

.demo-hub-page .demo-site--artist .artist-final > div {
  width: calc(55% - 20px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-final > div h3 {
  margin: 16px 0;
  color: #f4f2ec;
}

.demo-hub-page .demo-site--artist .artist-final > div > div {
  gap: 10px;
  margin-top: 24px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--artist .artist-final figure {
  width: calc(45% - 20px);
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  margin: 0;
  border-radius: 2px !important;
}

.demo-hub-page .demo-site--artist .artist-footer {
  padding: 48px 60px;
}@media (max-width: 900px) {
  .demo-hub-page .demo-site--artist .artist-hero,
  .demo-hub-page .demo-site--artist .artist-editorial,
  .demo-hub-page .demo-site--artist .artist-commissions,
  .demo-hub-page .demo-site--artist .artist-about,
  .demo-hub-page .demo-site--artist .artist-final {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--artist .artist-hero__copy,
  .demo-hub-page .demo-site--artist .artist-hero__gallery,
  .demo-hub-page .demo-site--artist .artist-editorial > div,
  .demo-hub-page .demo-site--artist .artist-editorial figure,
  .demo-hub-page .demo-site--artist .artist-editorial figure:last-child,
  .demo-hub-page .demo-site--artist .artist-commissions__intro,
  .demo-hub-page .demo-site--artist .artist-commissions form,
  .demo-hub-page .demo-site--artist .artist-about__portrait,
  .demo-hub-page .demo-site--artist .artist-about__copy,
  .demo-hub-page .demo-site--artist .artist-final > div,
  .demo-hub-page .demo-site--artist .artist-final figure {
    width: 100%;
  }
  .demo-hub-page .demo-site--artist .artist-work__types,
  .demo-hub-page .demo-site--artist .artist-products {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--artist .artist-work__types article,
  .demo-hub-page .demo-site--artist .artist-product,
  .demo-hub-page .demo-site--artist .artist-product--large {
    width: calc(50% - 10px);
    flex-basis: calc(50% - 10px);
  }}@media (max-width: 680px) {
  .demo-hub-page .demo-site--artist .artist-site section {
    padding: 60px !important;
  }
  .demo-hub-page .demo-site--artist .artist-heading,
  .demo-hub-page .demo-site--artist .artist-statement__copy,
  .demo-hub-page .demo-site--artist .artist-originals > header > div:first-child {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--artist .artist-heading > p,
  .demo-hub-page .demo-site--artist .artist-heading h3,
  .demo-hub-page .demo-site--artist .artist-heading > span,
  .demo-hub-page .demo-site--artist .artist-statement__copy > p,
  .demo-hub-page .demo-site--artist .artist-statement__copy h3,
  .demo-hub-page .demo-site--artist .artist-statement__copy > span,
  .demo-hub-page .demo-site--artist .artist-originals > header > div:first-child > p,
  .demo-hub-page .demo-site--artist .artist-originals > header > div:first-child > h3,
  .demo-hub-page .demo-site--artist .artist-originals > header > div:first-child > span,
  .demo-hub-page .demo-site--artist .artist-statement > figure,
  .demo-hub-page .demo-site--artist .artist-statement__routes,
  .demo-hub-page .demo-site--artist .artist-work__types article,
  .demo-hub-page .demo-site--artist .artist-product,
  .demo-hub-page .demo-site--artist .artist-product--large,
  .demo-hub-page .demo-site--artist .artist-commissions form label {
    width: 100%;
    flex-basis: 100%;
  }}
/* Photographer audit — isolated final rules for June & Field. */
.demo-hub-page .demo-site--photographer {
  --demo-radius: 0px;
  background: #e9e8e2;
  color: #171816;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

.demo-hub-page .demo-site--photographer .photo-site {
  background: #e9e8e2;
}

.demo-hub-page .demo-site--photographer .photo-site section {
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 60px !important;
  overflow: visible !important;
}

.demo-hub-page .demo-site--photographer .photo-site section > div,
.demo-hub-page .demo-site--photographer .photo-site section > header,
.demo-hub-page .demo-site--photographer .photo-site section form,
.demo-hub-page .demo-site--photographer .photo-site section [class$=__copy] {
  max-width: none !important;
}

.demo-hub-page .demo-site--photographer .photo-site h2,
.demo-hub-page .demo-site--photographer .photo-site h3,
.demo-hub-page .demo-site--photographer .photo-site h4,
.demo-hub-page .demo-site--photographer .photo-manifesto > p,
.demo-hub-page .demo-site--photographer .photo-nav__brand strong,
.demo-hub-page .demo-site--photographer .photo-pricing__options strong,
.demo-hub-page .demo-site--photographer .photo-enquire__visual > p {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-weight: 400;
}

.demo-hub-page .demo-site--photographer .photo-site section h2,
.demo-hub-page .demo-site--photographer .photo-site section h3,
.demo-hub-page .demo-site--photographer .photo-manifesto > p {
  max-width: none !important;
  font-size: clamp(36px, 3.5vw, 48px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
}

.demo-hub-page .demo-site--photographer .photo-site section p,
.demo-hub-page .demo-site--photographer .photo-site section span {
  max-width: none !important;
}

.demo-hub-page .demo-site--photographer .photo-site section a,
.demo-hub-page .demo-site--photographer .photo-site section button,
.demo-hub-page .demo-site--photographer .photo-nav__enquire {
  display: inline-flex;
  min-height: 42px !important;
  align-items: center;
  justify-content: center;
  padding: 0 16px !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--photographer .photo-nav {
  min-height: 76px;
  padding: 0 60px;
}

.demo-hub-page .demo-site--photographer .photo-nav__brand strong {
  font-size: 28px;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--photographer .photo-nav__enquire {
  margin-left: 12px;
  border: 1px solid #171816 !important;
}

.demo-hub-page .demo-site--photographer .photo-hero {
  display: flex;
  align-items: stretch !important;
  gap: 32px;
}

.demo-hub-page .demo-site--photographer .photo-hero__copy {
  width: calc(44% - 16px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-hero__copy h2 {
  width: 100%;
  margin: 18px 0;
}

.demo-hub-page .demo-site--photographer .photo-hero__copy > p:not(.photo-kicker) {
  width: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--photographer .photo-actions {
  gap: 10px;
  margin-top: 24px;
}

.demo-hub-page .demo-site--photographer .photo-actions a:first-child {
  background: #171816;
  color: #f4f2eb;
}

.demo-hub-page .demo-site--photographer .photo-actions .is-light {
  background: transparent;
  color: #171816;
}

.demo-hub-page .demo-site--photographer .photo-hero__copy > small {
  margin-top: 24px;
}

.demo-hub-page .demo-site--photographer .photo-hero__main {
  width: calc(56% - 16px);
  min-height: 500px !important;
  margin: 0;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-hero__detail {
  right: calc(56% - 95px);
  bottom: 80px;
  height: 150px !important;
  max-height: 150px !important;
  border-color: #e9e8e2;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-manifesto {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px;
  background: #1d211e;
}

.demo-hub-page .demo-site--photographer .photo-manifesto > p {
  width: 100%;
  margin: 0;
  text-align: left;
  color: #eeede7;
}

.demo-hub-page .demo-site--photographer .photo-manifesto__mosaic {
  width: 100%;
  gap: 16px !important;
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-manifesto__mosaic figure {
  height: 210px !important;
  min-height: 0 !important;
  margin: 0;
}

.demo-hub-page .demo-site--photographer .photo-section-heading {
  display: block;
  margin-bottom: 36px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-section-heading > p {
  width: 100%;
  margin: 0 0 16px;
}

.demo-hub-page .demo-site--photographer .photo-section-heading > h3,
.demo-hub-page .demo-site--photographer .photo-section-heading > div {
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-section-heading h3 {
  width: 100%;
  margin: 0;
}

.demo-hub-page .demo-site--photographer .photo-section-heading > div > p {
  width: 100%;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--photographer .photo-session-list article {
  min-height: 0;
  padding: 20px 0;
}

.demo-hub-page .demo-site--photographer .photo-session-list article h4 {
  font-size: clamp(28px, 2.5vw, 40px);
}

.demo-hub-page .demo-site--photographer .photo-session-list article figure {
  width: 220px;
  height: 140px !important;
  max-height: 140px !important;
}

.demo-hub-page .demo-site--photographer .photo-session-list article > a {
  width: auto;
}

.demo-hub-page .demo-site--photographer .photo-story-filters {
  gap: 8px;
  margin-bottom: 24px;
}

.demo-hub-page .demo-site--photographer .photo-story-filters button {
  min-height: 36px !important;
}

.demo-hub-page .demo-site--photographer .photo-story-list {
  gap: 20px !important;
}

.demo-hub-page .demo-site--photographer .photo-story,
.demo-hub-page .demo-site--photographer .photo-story--lead {
  width: calc((100% - 40px) / 3);
  flex: 0 0 calc((100% - 40px) / 3);
  margin: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-story figure,
.demo-hub-page .demo-site--photographer .photo-story--lead figure {
  height: 230px !important;
  max-height: 230px !important;
}

.demo-hub-page .demo-site--photographer .photo-story > div {
  padding: 16px 0 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-story h4 {
  font-size: 30px;
}

.demo-hub-page .demo-site--photographer .photo-story button {
  margin-top: 16px;
}

.demo-hub-page .demo-site--photographer .photo-story--wide {
  width: 100%;
  flex: 0 0 100%;
  align-items: stretch;
  gap: 24px;
  margin: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-story--wide figure {
  width: calc(68% - 12px);
  height: 280px !important;
  max-height: 280px !important;
}

.demo-hub-page .demo-site--photographer .photo-story--wide > div {
  width: calc(32% - 12px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-experience {
  display: flex;
  align-items: stretch !important;
  gap: 32px;
}

.demo-hub-page .demo-site--photographer .photo-experience__copy {
  width: calc(48% - 16px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-experience__copy h3 {
  margin: 18px 0;
}

.demo-hub-page .demo-site--photographer .photo-experience__copy > p:not(.photo-kicker) {
  width: 100%;
  margin: 0 0 12px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--photographer .photo-experience__copy ol {
  margin-top: 18px;
}

.demo-hub-page .demo-site--photographer .photo-experience__images {
  width: calc(52% - 16px);
  min-height: 420px;
  gap: 16px !important;
  background: transparent;
}

.demo-hub-page .demo-site--photographer .photo-experience__images figure {
  height: 420px !important;
  max-height: 420px !important;
}

.demo-hub-page .demo-site--photographer .photo-experience__images figure:last-child {
  right: 20px;
  bottom: 20px;
  height: 170px !important;
  max-height: 170px !important;
  border-color: #eeede7;
}

.demo-hub-page .demo-site--photographer .photo-pricing {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.demo-hub-page .demo-site--photographer .photo-pricing > header {
  width: calc(38% - 20px);
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-pricing > header h3 {
  margin: 16px 0;
}

.demo-hub-page .demo-site--photographer .photo-pricing__options {
  width: calc(62% - 20px);
  gap: 16px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-pricing__options article {
  padding: 24px;
  border: 1px solid rgba(238, 237, 231, 0.35);
}

.demo-hub-page .demo-site--photographer .photo-pricing__options article + article {
  border-left: 1px solid rgba(238, 237, 231, 0.35);
}

.demo-hub-page .demo-site--photographer .photo-pricing__options strong {
  margin: 20px 0;
  font-size: 32px;
}

.demo-hub-page .demo-site--photographer .photo-pricing__options p {
  margin-bottom: 24px;
}

.demo-hub-page .demo-site--photographer .photo-faq__items {
  width: 100%;
  margin: 0;
  padding: 0 !important;
  border-top: 1px solid rgba(23, 24, 22, 0.3);
}

.demo-hub-page .demo-site--photographer .photo-site .photo-faq__items article {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(23, 24, 22, 0.3);
  border-radius: 0 !important;
  background: transparent !important;
}

.demo-hub-page .demo-site--photographer .photo-site .photo-faq__items article > button {
  display: flex;
  width: 100% !important;
  min-height: 64px !important;
  align-items: center !important;
  justify-content: space-between;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #171816 !important;
  text-align: left;
}

.demo-hub-page .demo-site--photographer .photo-site .photo-faq__items article > button span {
  display: inline-flex;
  width: auto;
  height: auto;
  margin-left: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  font-size: 18px;
}

.demo-hub-page .demo-site--photographer .photo-site .photo-faq__items article > p {
  width: 100%;
  margin: 0 !important;
  padding: 0 64px 20px 0;
  font-size: 15px;
  line-height: 1.6;
}

.demo-hub-page .demo-site--photographer .photo-enquire {
  display: flex;
  align-items: stretch !important;
  gap: 40px;
}

.demo-hub-page .demo-site--photographer .photo-enquire__visual {
  width: calc(44% - 20px);
  min-height: 500px;
}

.demo-hub-page .demo-site--photographer .photo-enquire__visual figure {
  height: 500px !important;
  max-height: 500px !important;
}

.demo-hub-page .demo-site--photographer .photo-enquire form {
  width: calc(56% - 20px);
  gap: 16px 20px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-enquire form > div {
  width: 100%;
  margin-bottom: 8px;
  padding: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-enquire form > div h3 {
  margin: 12px 0 0;
}

.demo-hub-page .demo-site--photographer .photo-enquire form label {
  width: calc(50% - 10px);
}

.demo-hub-page .demo-site--photographer .photo-enquire form input,
.demo-hub-page .demo-site--photographer .photo-enquire form select,
.demo-hub-page .demo-site--photographer .photo-enquire form textarea {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--photographer .photo-enquire form > button {
  width: 100%;
  background: #171816;
  color: #f4f2eb;
}

.demo-hub-page .demo-site--photographer .photo-footer {
  min-height: 0;
  padding: 36px 60px;
}@media (max-width: 900px) {
  .demo-hub-page .demo-site--photographer .photo-hero,
  .demo-hub-page .demo-site--photographer .photo-experience,
  .demo-hub-page .demo-site--photographer .photo-pricing,
  .demo-hub-page .demo-site--photographer .photo-enquire {
    flex-wrap: wrap;
  }
  .demo-hub-page .demo-site--photographer .photo-hero__copy,
  .demo-hub-page .demo-site--photographer .photo-hero__main,
  .demo-hub-page .demo-site--photographer .photo-experience__copy,
  .demo-hub-page .demo-site--photographer .photo-experience__images,
  .demo-hub-page .demo-site--photographer .photo-pricing > header,
  .demo-hub-page .demo-site--photographer .photo-pricing__options,
  .demo-hub-page .demo-site--photographer .photo-enquire__visual,
  .demo-hub-page .demo-site--photographer .photo-enquire form {
    width: 100%;
  }
  .demo-hub-page .demo-site--photographer .photo-story,
  .demo-hub-page .demo-site--photographer .photo-story--lead {
    width: calc(50% - 10px);
    flex-basis: calc(50% - 10px);
  }}@media (max-width: 680px) {
  .demo-hub-page .demo-site--photographer .photo-site section {
    padding: 60px !important;
  }
  .demo-hub-page .demo-site--photographer .photo-nav {
    padding: 0 24px;
  }
  .demo-hub-page .demo-site--photographer .photo-session-list article,
  .demo-hub-page .demo-site--photographer .photo-story--wide,
  .demo-hub-page .demo-site--photographer .photo-pricing__options {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--photographer .photo-session-list article > div,
  .demo-hub-page .demo-site--photographer .photo-session-list article figure,
  .demo-hub-page .demo-site--photographer .photo-session-list article > a,
  .demo-hub-page .demo-site--photographer .photo-story,
  .demo-hub-page .demo-site--photographer .photo-story--lead,
  .demo-hub-page .demo-site--photographer .photo-story--wide figure,
  .demo-hub-page .demo-site--photographer .photo-story--wide > div,
  .demo-hub-page .demo-site--photographer .photo-pricing__options article,
  .demo-hub-page .demo-site--photographer .photo-enquire form label {
    width: 100%;
    flex-basis: 100%;
  }}
/* Jewelry geometry lock: keep the final audit above later generic demo rules. */
.demo-hub-page .demo-site--jewelry .jewel-site section a,
.demo-hub-page .demo-site--jewelry .jewel-site section button {
  border-radius: 8px !important;
}

.demo-hub-page .demo-site--jewelry .jewel-hero > figure,
.demo-hub-page .demo-site--jewelry .jewel-final > figure {
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site--jewelry .jewel-products article figure {
  height: 250px !important;
  max-height: 250px !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial figure,
.demo-hub-page .demo-site--jewelry .jewel-editorial__copy {
  height: 390px !important;
  min-height: 0 !important;
  max-height: 390px !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site--jewelry .jewel-process__images,
.demo-hub-page .demo-site--jewelry .jewel-process__steps,
.demo-hub-page .demo-site--jewelry .jewel-process__images figure,
.demo-hub-page .demo-site--jewelry .jewel-process__images figure:last-child {
  height: 430px !important;
  min-height: 0 !important;
  max-height: 430px !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site--jewelry .jewel-custom__copy figure {
  width: 100% !important;
  height: 220px !important;
  min-height: 0 !important;
  max-height: 220px !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site--jewelry .jewel-local__content,
.demo-hub-page .demo-site--jewelry .jewel-local__content figure,
.demo-hub-page .demo-site--jewelry .jewel-local__content > div {
  height: 380px !important;
  min-height: 0 !important;
  max-height: 380px !important;
}

.demo-hub-page .demo-site--jewelry .jewel-local__content figure {
  aspect-ratio: auto !important;
}@media (max-width: 980px) {
  .demo-hub-page .demo-site--jewelry .jewel-editorial__copy {
    width: 100%;
    height: auto !important;
    max-height: none !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial__portrait,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__detail {
    width: calc(50% - 10px);
    height: 300px !important;
    max-height: 300px !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-local__content,
  .demo-hub-page .demo-site--jewelry .jewel-local__content > div {
    height: auto !important;
    max-height: none !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-local__content figure {
    width: 100%;
    height: 340px !important;
    max-height: 340px !important;
  }}@media (max-width: 680px) {
  .demo-hub-page .demo-site--jewelry .jewel-products article figure {
    height: 220px !important;
    max-height: 220px !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial__portrait,
  .demo-hub-page .demo-site--jewelry .jewel-editorial__detail,
  .demo-hub-page .demo-site--jewelry .jewel-process__images figure,
  .demo-hub-page .demo-site--jewelry .jewel-process__images figure:last-child {
    width: 100%;
    height: 280px !important;
    max-height: 280px !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-process__images,
  .demo-hub-page .demo-site--jewelry .jewel-process__steps {
    height: auto !important;
    max-height: none !important;
  }}
/* Jewelry visual corrections from the rendered-page review. */
.demo-hub-page .demo-site--jewelry .jewel-hero,
.demo-hub-page .demo-site--jewelry .jewel-final {
  width: 100%;
  height: 90vh !important;
  min-height: 90vh !important;
  max-height: 90vh !important;
  padding: 60px !important;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-hero > figure,
.demo-hub-page .demo-site--jewelry .jewel-hero > figure img,
.demo-hub-page .demo-site--jewelry .jewel-final > figure,
.demo-hub-page .demo-site--jewelry .jewel-final > figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
}

.demo-hub-page .demo-site--jewelry .jewel-intro {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 36px !important;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__lead {
  display: flex !important;
  width: 100% !important;
  align-items: center;
  text-align: center;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes {
  display: flex !important;
  width: 100% !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 16px !important;
  border: 0 !important;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes article {
  display: flex !important;
  width: calc(33.333% - 11px) !important;
  min-height: 180px;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 12px !important;
  padding: 24px !important;
  border: 1px solid var(--jewel-line) !important;
  border-radius: 8px !important;
  text-align: center;
}

.demo-hub-page .demo-site--jewelry .jewel-intro__notes b,
.demo-hub-page .demo-site--jewelry .jewel-intro__notes span {
  width: 100% !important;
}

.demo-hub-page .demo-site--jewelry .jewel-filters button {
  border-color: var(--jewel-ink) !important;
  background: transparent !important;
  color: var(--jewel-ink) !important;
}

.demo-hub-page .demo-site--jewelry .jewel-filters button.is-active {
  border-color: var(--jewel-ink) !important;
  background: var(--jewel-ink) !important;
  color: var(--jewel-paper) !important;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial {
  display: flex !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  align-items: stretch !important;
  gap: 20px !important;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial__copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.demo-hub-page .demo-site--jewelry .jewel-editorial__copy a {
  align-self: center;
}

.demo-hub-page .demo-site--jewelry .jewel-hero__copy,
.demo-hub-page .demo-site--jewelry .jewel-final > div {
  position: relative;
  z-index: 2;
  display: flex !important;
  height: 100% !important;
  min-height: 0 !important;
  justify-content: center !important;
}

.demo-hub-page .demo-site--jewelry .jewel-final > div {
  width: 100%;
  align-items: center !important;
  padding: 0 !important;
  text-align: center;
}@media (max-width: 680px) {
  .demo-hub-page .demo-site--jewelry .jewel-hero,
  .demo-hub-page .demo-site--jewelry .jewel-final {
    height: 90vh !important;
    min-height: 90vh !important;
    max-height: 90vh !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-intro__notes {
    flex-direction: column !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-intro__notes article {
    width: 100% !important;
  }
  .demo-hub-page .demo-site--jewelry .jewel-editorial {
    flex-direction: column;
  }}
/* ============================================================
   Common Clay (pottery) demo - redesigned layout.
   Scoped to .demo-site--commonclay so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--commonclay {
  --cc-bg: #fbf9f5;
  --cc-paper: #f4efe7;
  --cc-ink: #24211d;
  --cc-muted: #6f6a63;
  --cc-clay: #a84f35;
  --cc-sand: #d8d0c5;
  --cc-line: rgba(36, 33, 29, 0.14);
  --cc-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --cc-mono: Inter, Arial, sans-serif;
  --cc-gutter: max(20px, calc((100% - 1280px) / 2));
  background: var(--cc-bg) !important;
  color: var(--cc-ink);
}

.demo-hub-page .demo-site--commonclay .cc {
  position: relative;
  background: var(--cc-bg);
  color: var(--cc-ink);
  font-family: var(--cc-display);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--commonclay .cc * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--commonclay .cc [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--commonclay .cc img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--commonclay .cc figure {
  margin: 0;
  overflow: hidden;
}

.demo-hub-page .demo-site--commonclay .cc p {
  margin: 0;
}

.demo-hub-page .demo-site--commonclay .cc a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--commonclay .cc ul,
.demo-hub-page .demo-site--commonclay .cc dl,
.demo-hub-page .demo-site--commonclay .cc dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--commonclay .cc em {
  font-style: normal;
  color: var(--cc-clay);
}

/* headings: override the shared !important heading rules */
.demo-hub-page .demo-site--commonclay .cc h2,
.demo-hub-page .demo-site--commonclay .cc h3,
.demo-hub-page .demo-site--commonclay .cc h4 {
  margin: 0;
  text-transform: none !important;
  max-width: none;
  font-family: var(--cc-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: inherit;
}

.demo-hub-page .demo-site--commonclay .cc h3 {
  font-size: clamp(2.2rem, 4.6vw, 4.2rem) !important;
}

.demo-hub-page .demo-site--commonclay .cc h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
}

/* small mono labels */
.demo-hub-page .demo-site--commonclay .cc .cc-mono,
.demo-hub-page .demo-site--commonclay .cc .cc-eyebrow,
.demo-hub-page .demo-site--commonclay .cc .cc-label,
.demo-hub-page .demo-site--commonclay .cc .cc-badge,
.demo-hub-page .demo-site--commonclay .cc .cc-footer__cols > div > span {
  font-family: var(--cc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--commonclay .cc .cc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--cc-clay);
}

.demo-hub-page .demo-site--commonclay .cc .cc-eyebrow i {
  display: block;
  width: 38px;
  height: 1px;
  background: currentColor;
}

.demo-hub-page .demo-site--commonclay .cc .cc-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-label i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-clay);
}

/* buttons */
.demo-hub-page .demo-site--commonclay .cc .cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.6rem;
  border: 1px solid var(--cc-ink);
  border-radius: 999px !important;
  background: transparent;
  color: var(--cc-ink);
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn--small {
  min-height: 40px;
  padding: 0 1.1rem;
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn--dark {
  background: var(--cc-ink);
  color: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn--dark:hover {
  background: var(--cc-clay);
  border-color: var(--cc-clay);
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn--line:hover {
  background: var(--cc-ink);
  color: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn--clay {
  background: var(--cc-clay);
  border-color: var(--cc-clay);
  color: #fff;
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn--clay:hover {
  background: var(--cc-ink);
  border-color: var(--cc-ink);
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn--light {
  background: var(--cc-bg);
  border-color: var(--cc-bg);
  color: var(--cc-ink);
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn--light:hover {
  background: var(--cc-clay);
  border-color: var(--cc-clay);
  color: #fff;
}

.demo-hub-page .demo-site--commonclay .cc .cc-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.demo-hub-page .demo-site--commonclay .cc .cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-actions--center {
  justify-content: center;
}

/* section frame */
.demo-hub-page .demo-site--commonclay .cc .cc-sec {
  padding: clamp(56px, 7vw, 112px) var(--cc-gutter);
}

.demo-hub-page .demo-site--commonclay .cc .cc-head {
  display: grid;
  gap: 1.1rem;
  max-width: 46rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-head--center {
  margin: 0 auto clamp(36px, 5vw, 64px);
  text-align: center;
  justify-items: center;
}

.demo-hub-page .demo-site--commonclay .cc .cc-head p:not(.cc-eyebrow) {
  color: var(--cc-muted);
  font-size: 1.05rem;
  max-width: 36rem;
}

/* header */
.demo-hub-page .demo-site--commonclay .cc .cc-header {
  background: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-header__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px var(--cc-gutter);
  border-bottom: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 2rem;
  letter-spacing: -0.04em;
  justify-self: center;
}

.demo-hub-page .demo-site--commonclay .cc .cc-brand small {
  font-family: var(--cc-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-clay);
}

.demo-hub-page .demo-site--commonclay .cc .cc-bag {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.2rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px !important;
  background: transparent;
  color: var(--cc-ink);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.demo-hub-page .demo-site--commonclay .cc .cc-bag:hover {
  border-color: var(--cc-ink);
}

.demo-hub-page .demo-site--commonclay .cc .cc-bag span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cc-clay);
  color: #fff;
  font-family: var(--cc-mono);
  font-size: 0.7rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--cc-gutter);
  min-height: 58px;
  border-bottom: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-header__nav nav {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-header__nav nav a,
.demo-hub-page .demo-site--commonclay .cc .cc-offer-link {
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-header__nav nav a:hover {
  color: var(--cc-clay);
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer-link {
  color: var(--cc-clay);
}

/* hero */
.demo-hub-page .demo-site--commonclay .cc .cc-hero {
  padding: clamp(40px, 6vw, 88px) var(--cc-gutter) clamp(56px, 7vw, 100px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__head {
  display: grid;
  gap: 1.6rem;
  margin-bottom: clamp(28px, 4vw, 56px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero h2 {
  max-width: 14ch;
  font-size: clamp(3.4rem, 9vw, 8.4rem) !important;
  letter-spacing: -0.055em !important;
  line-height: 0.94 !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__copy {
  display: grid;
  gap: 1.5rem;
  align-content: end;
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__copy > p:first-child {
  color: var(--cc-muted);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-meta {
  color: var(--cc-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-top: 1.4rem;
  border-top: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-stats--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-hub-page .demo-site--commonclay .cc .cc-stats dt {
  font-size: 2.2rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.demo-hub-page .demo-site--commonclay .cc .cc-stats dd {
  margin-top: 0.5rem;
  color: var(--cc-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__arch {
  position: relative;
  overflow: visible;
  aspect-ratio: 1/1.12;
  border-radius: 999px 999px 32px 32px !important;
  background: var(--cc-paper);
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__arch img {
  border-radius: inherit;
}

.demo-hub-page .demo-site--commonclay .cc .cc-chip {
  position: absolute;
  top: 38%;
  left: 100%;
  translate: -62% 0;
  display: grid;
  gap: 4px;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--cc-bg);
  box-shadow: 0 14px 40px rgba(36, 33, 29, 0.14);
}

.demo-hub-page .demo-site--commonclay .cc .cc-chip strong {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__side {
  display: grid;
  gap: 1.4rem;
  align-content: end;
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__tag {
  color: var(--cc-muted);
  text-align: right;
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-hero__small {
  aspect-ratio: 1/0.82;
  border-radius: 28px !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding-top: 1rem;
  border-top: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-note .cc-mono {
  grid-column: 1/-1;
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-note strong {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--commonclay .cc .cc-note i {
  font-style: normal;
  align-self: end;
  font-size: 1.3rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-note:hover strong {
  color: var(--cc-clay);
}

/* principle strip */
.demo-hub-page .demo-site--commonclay .cc .cc-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 0 var(--cc-gutter);
  padding: 22px 0;
  border-block: 1px solid var(--cc-line);
  font-family: var(--cc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-strip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cc-ink);
}

/* shop by ritual */
.demo-hub-page .demo-site--commonclay .cc .cc-ritual__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile {
  display: grid;
  gap: 0.6rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile:nth-child(even) {
  margin-top: clamp(24px, 4vw, 56px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile figure {
  aspect-ratio: 4/5;
  border-radius: 28px !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile img {
  transition: transform 0.6s ease;
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  font-size: 1.15rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile div strong {
  font-weight: 400;
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile div i {
  font-style: normal;
}

.demo-hub-page .demo-site--commonclay .cc .cc-tile > span {
  color: var(--cc-muted);
  font-size: 0.9rem;
}

/* limited kiln offers */
.demo-hub-page .demo-site--commonclay .cc .cc-offers {
  padding-top: 0;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offers__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px);
  border-radius: 36px;
  background: var(--cc-ink);
  color: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-offers__copy {
  display: grid;
  gap: 1.4rem;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offers__copy .cc-eyebrow {
  color: var(--cc-sand);
}

.demo-hub-page .demo-site--commonclay .cc .cc-offers__copy > p:not(.cc-eyebrow) {
  color: rgba(251, 249, 245, 0.72);
}

.demo-hub-page .demo-site--commonclay .cc .cc-offers__copy .cc-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offers__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer figure {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 24px !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cc-bg);
  color: var(--cc-ink);
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer__row .cc-mono {
  color: var(--cc-sand);
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer__row h4 {
  margin-top: 0.4rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer__row p {
  display: grid;
  text-align: right;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer__row s {
  color: rgba(251, 249, 245, 0.5);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer__row b {
  font-weight: 400;
  font-size: 1.2rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-offer .cc-btn {
  justify-self: start;
}

/* build your table */
.demo-hub-page .demo-site--commonclay .cc .cc-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__img {
  aspect-ratio: 4/5;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__img--left {
  rotate: -2deg;
  margin-left: 6px;
  border-radius: 999px 999px 24px 24px !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__img--right {
  position: relative;
  overflow: visible;
  aspect-ratio: auto;
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__img--right img {
  aspect-ratio: 4/5;
  height: auto;
  border-radius: 999px 999px 24px 24px;
  rotate: 2deg;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__img--right figcaption {
  display: grid;
  gap: 4px;
  text-align: right;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__img--right figcaption strong {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__img--right figcaption span {
  color: var(--cc-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}

.demo-hub-page .demo-site--commonclay .cc .cc-table__copy > p:not(.cc-eyebrow) {
  color: var(--cc-muted);
  max-width: 30rem;
}

/* featured product grid */
.demo-hub-page .demo-site--commonclay .cc .cc-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-feature:nth-child(odd) {
  margin-top: clamp(24px, 4vw, 56px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-frame {
  padding: 14px;
  border-radius: 34px;
  background: var(--cc-paper);
}

.demo-hub-page .demo-site--commonclay .cc .cc-frame figure {
  aspect-ratio: 4/5;
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-feature__body {
  display: grid;
  gap: 0.7rem;
  padding: 18px 4px 0;
}

.demo-hub-page .demo-site--commonclay .cc .cc-feature__body > .cc-mono {
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-feature__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-feature__row b {
  font-weight: 400;
  font-size: 1rem;
  white-space: nowrap;
}

.demo-hub-page .demo-site--commonclay .cc .cc-feature__body > p {
  color: var(--cc-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.4rem;
}

/* shop catalogue */
.demo-hub-page .demo-site--commonclay .cc .cc-shop {
  background: var(--cc-paper);
}

.demo-hub-page .demo-site--commonclay .cc .cc-shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-shop__head > div:first-child {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-filters button {
  min-height: 42px;
  padding: 0 1.2rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px !important;
  background: transparent;
  color: var(--cc-ink);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--commonclay .cc .cc-filters button:hover {
  border-color: var(--cc-ink);
}

.demo-hub-page .demo-site--commonclay .cc .cc-filters button.is-active {
  background: var(--cc-ink);
  border-color: var(--cc-ink);
  color: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-shop__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px) clamp(16px, 2vw, 28px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-card figure {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 26px !important;
  background: var(--cc-sand);
}

.demo-hub-page .demo-site--commonclay .cc .cc-card img {
  transition: transform 0.6s ease;
}

.demo-hub-page .demo-site--commonclay .cc .cc-card:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--commonclay .cc .cc-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-card__row div {
  display: grid;
  gap: 4px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-card__row span {
  color: var(--cc-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-card__row b {
  font-weight: 400;
  font-size: 1.15rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* glaze families */
.demo-hub-page .demo-site--commonclay .cc .cc-moods {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__intro {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__intro > p:not(.cc-eyebrow) {
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__list {
  border-top: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__list article {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) clamp(150px, 20vw, 240px);
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__list article > .cc-mono {
  color: var(--cc-clay);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__list article div {
  display: grid;
  gap: 0.5rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__list article div .cc-mono {
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__list article h4 {
  font-size: 1.9rem !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__list article p {
  color: var(--cc-muted);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-moods__list figure {
  aspect-ratio: 5/3.4;
  border-radius: 18px !important;
}

/* made with intention */
.demo-hub-page .demo-site--commonclay .cc .cc-intent {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  background: var(--cc-paper);
}

.demo-hub-page .demo-site--commonclay .cc .cc-intent__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: end;
}

.demo-hub-page .demo-site--commonclay .cc .cc-intent__images figure {
  aspect-ratio: 3/4;
  border-radius: 28px !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-intent__images figure:first-child {
  margin-bottom: clamp(24px, 5vw, 64px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-intent__copy {
  display: grid;
  gap: 1.4rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-intent__copy > p:not(.cc-eyebrow) {
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-notes {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(16px, 3vw, 40px);
  padding-top: 28px;
  border-top: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-notes li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-notes strong {
  font-weight: 400;
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-notes span {
  color: var(--cc-muted);
  font-size: 0.9rem;
}

/* customer notes */
.demo-hub-page .demo-site--commonclay .cc .cc-voices {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: stretch;
}

.demo-hub-page .demo-site--commonclay .cc .cc-quote {
  display: grid;
  gap: 2rem;
  align-content: space-between;
  min-height: 420px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 32px !important;
  background: var(--cc-clay);
  color: #fff;
}

.demo-hub-page .demo-site--commonclay .cc .cc-quote .cc-mono {
  color: rgba(255, 255, 255, 0.78);
}

.demo-hub-page .demo-site--commonclay .cc .cc-quote blockquote {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--commonclay .cc .cc-quote div {
  display: grid;
  gap: 4px;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.demo-hub-page .demo-site--commonclay .cc .cc-quote div strong {
  font-weight: 400;
}

.demo-hub-page .demo-site--commonclay .cc .cc-quote div span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__side figure {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 32px !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__side figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 22px;
  background: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__side figcaption .cc-mono {
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__side figcaption p {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__side figcaption small {
  color: var(--cc-muted);
  font-size: 0.8rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__stat {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-block: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__stat b {
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  letter-spacing: -0.05em;
  color: var(--cc-clay);
  line-height: 1;
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__stat span {
  display: grid;
  gap: 4px;
  color: var(--cc-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-voices__stat strong {
  font-weight: 400;
  color: var(--cc-ink);
  font-size: 1rem;
}

/* find us */
.demo-hub-page .demo-site--commonclay .cc .cc-find {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding-top: 0;
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__copy > p:not(.cc-eyebrow) {
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__cards {
  display: grid;
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__cards article {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__cards article .cc-mono {
  color: var(--cc-clay);
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__cards article strong {
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__cards article p {
  color: var(--cc-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  aspect-ratio: 1/0.9;
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__gallery figure {
  border-radius: 24px !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-find__gallery figure:first-child {
  grid-row: 1/3;
}

/* closing call to action */
.demo-hub-page .demo-site--commonclay .cc .cc-cta {
  padding-top: 0;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cta__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: 36px;
  background: var(--cc-clay);
  color: #fff;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cta__panel > div {
  display: grid;
  gap: 1.4rem;
  align-content: center;
  justify-items: start;
  padding: clamp(28px, 5vw, 72px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cta__panel .cc-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cta__panel h3 {
  max-width: 14ch;
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cta__panel figure {
  min-height: 320px;
  border-radius: 0 !important;
}

/* footer */
.demo-hub-page .demo-site--commonclay .cc .cc-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(56px, 7vw, 96px) var(--cc-gutter) 28px;
  background: var(--cc-ink);
  color: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__brand {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__brand .cc-eyebrow {
  color: var(--cc-sand);
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__brand strong {
  font-weight: 400;
  white-space: nowrap;
  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__brand > p:last-child {
  color: rgba(251, 249, 245, 0.7);
  max-width: 26rem;
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__cols > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__cols > div > span {
  margin-bottom: 0.4rem;
  color: var(--cc-sand);
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__cols a {
  color: rgba(251, 249, 245, 0.85);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__cols a:hover {
  color: #fff;
}

.demo-hub-page .demo-site--commonclay .cc .cc-footer__legal {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(251, 249, 245, 0.18);
  color: rgba(251, 249, 245, 0.6);
  font-size: 0.85rem;
}

/* cart + product detail panels */
.demo-hub-page .demo-site--commonclay .cc .cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(36, 33, 29, 0.5);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: var(--cc-bg);
  color: var(--cc-ink);
  box-shadow: -20px 0 60px rgba(36, 33, 29, 0.2);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > header,
.demo-hub-page .demo-site--commonclay .cc .cc-cart > footer {
  padding: 24px 28px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > header div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > header span {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > header small {
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > header button,
.demo-hub-page .demo-site--commonclay .cc .cc-detail__close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cc-line);
  border-radius: 50% !important;
  background: transparent;
  color: var(--cc-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > header button:hover,
.demo-hub-page .demo-site--commonclay .cc .cc-detail__close:hover {
  background: var(--cc-ink);
  color: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart__items {
  flex: 1;
  overflow: auto;
  padding: 8px 28px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart__items > p {
  padding: 24px 0;
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart__items article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart__items article div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart__items article small,
.demo-hub-page .demo-site--commonclay .cc .cc-cart__items article span {
  color: var(--cc-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart__items article b {
  font-weight: 400;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart__items article button {
  grid-column: 1/-1;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-clay);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > footer {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--cc-line);
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > footer > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > footer strong {
  font-weight: 400;
  font-size: 1.5rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-cart > footer p {
  color: var(--cc-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9002;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(960px, 100% - 32px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 28px;
  background: var(--cc-bg);
  color: var(--cc-ink);
  box-shadow: 0 40px 100px rgba(36, 33, 29, 0.35);
  translate: -50% -46%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s linear 0.3s;
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail.is-open {
  opacity: 1;
  visibility: visible;
  translate: -50% -50%;
  transition-delay: 0s;
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: var(--cc-bg);
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail figure {
  min-height: 420px;
  border-radius: 0 !important;
  background: var(--cc-sand);
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail__copy {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding: clamp(24px, 4vw, 48px);
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail__copy > strong {
  font-weight: 400;
  font-size: 1.6rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail__copy > p:not(.cc-eyebrow) {
  color: var(--cc-muted);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail__copy label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--cc-muted);
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail__copy select {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--cc-line);
  border-radius: 12px !important;
  background: #fff;
  color: var(--cc-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--commonclay .cc .cc-detail__copy ul {
  display: grid;
  gap: 6px;
  padding-top: 1rem;
  border-top: 1px solid var(--cc-line);
  color: var(--cc-muted);
  font-size: 0.85rem;
}@media (max-width: 1100px) {
  .demo-hub-page .demo-site--commonclay .cc .cc-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-chip {
    left: auto;
    right: 16px;
    translate: none;
    top: auto;
    bottom: 16px;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-hero__side {
    grid-column: 1/-1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-hero__tag {
    text-align: left;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-ritual__grid,
  .demo-hub-page .demo-site--commonclay .cc .cc-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-offers__panel,
  .demo-hub-page .demo-site--commonclay .cc .cc-moods,
  .demo-hub-page .demo-site--commonclay .cc .cc-intent,
  .demo-hub-page .demo-site--commonclay .cc .cc-voices,
  .demo-hub-page .demo-site--commonclay .cc .cc-find,
  .demo-hub-page .demo-site--commonclay .cc .cc-footer {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-table {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-table__copy {
    grid-column: 1/-1;
    grid-row: 1;
  }}@media (max-width: 760px) {
  .demo-hub-page .demo-site--commonclay .cc .cc-header__top {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-label {
    display: none;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-brand {
    justify-self: start;
    font-size: 1.6rem;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-header__nav {
    overflow-x: auto;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-header__nav nav {
    flex-shrink: 0;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-hero__arch {
    order: -1;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-chip {
    left: 50%;
    translate: -50% 0;
    top: auto;
    bottom: 16px;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-hero__side {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-hero__small {
    display: none;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-strip {
    justify-content: flex-start;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-strip i {
    display: none;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-tile:nth-child(even),
  .demo-hub-page .demo-site--commonclay .cc .cc-feature:nth-child(odd) {
    margin-top: 0;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-offers__items,
  .demo-hub-page .demo-site--commonclay .cc .cc-shop__grid,
  .demo-hub-page .demo-site--commonclay .cc .cc-ritual__grid,
  .demo-hub-page .demo-site--commonclay .cc .cc-feature-grid,
  .demo-hub-page .demo-site--commonclay .cc .cc-notes,
  .demo-hub-page .demo-site--commonclay .cc .cc-footer__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-table {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-table__img--left,
  .demo-hub-page .demo-site--commonclay .cc .cc-table__img--right img {
    rotate: 0deg;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-table__img--left {
    display: none;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-moods__list article {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-moods__list figure {
    grid-column: 2;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-intent__images figure:first-child {
    margin-bottom: 0;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-cta__panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-detail figure {
    min-height: 240px;
  }
  .demo-hub-page .demo-site--commonclay .cc .cc-shop__head {
    align-items: flex-start;
  }}
/* ============================================================
   Maya Rowan (artist) demo - redesigned layout (boxed gallery style).
   Scoped to .demo-site--maya so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--maya {
  --mr-bg: #ffffff;
  --mr-ink: #25282e;
  --mr-muted: #6c6c6c;
  --mr-gold: #c1b696;
  --mr-line: #e4e4e4;
  --mr-dark: #25282e;
  --mr-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --mr-mono: Inter, Arial, sans-serif;
  --mr-gutter: max(20px, calc((100% - 1170px) / 2));
  background: var(--mr-bg) !important;
  color: var(--mr-ink);
}

.demo-hub-page .demo-site--maya .mr {
  position: relative;
  background: var(--mr-bg);
  color: var(--mr-ink);
  font-family: var(--mr-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--maya .mr * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--maya .mr [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--maya .mr img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--maya .mr figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--maya .mr p {
  margin: 0;
}

.demo-hub-page .demo-site--maya .mr a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--maya .mr article {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--maya .mr h2,
.demo-hub-page .demo-site--maya .mr h3,
.demo-hub-page .demo-site--maya .mr h4 {
  margin: 0;
  max-width: none;
  text-transform: none !important;
  font-family: var(--mr-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  color: inherit;
}

.demo-hub-page .demo-site--maya .mr h3 {
  font-size: clamp(2rem, 3.6vw, 3.2rem) !important;
}

.demo-hub-page .demo-site--maya .mr h4 {
  font-size: 1.5rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--maya .mr .mr-label {
  font-family: var(--mr-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* buttons: square, boxed */
.demo-hub-page .demo-site--maya .mr .mr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid var(--mr-ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--mr-ink);
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--maya .mr .mr-btn--dark {
  background: var(--mr-dark);
  border-color: var(--mr-dark);
  color: #fff;
}

.demo-hub-page .demo-site--maya .mr .mr-btn--dark:hover {
  background: var(--mr-gold);
  border-color: var(--mr-gold);
  color: var(--mr-ink);
}

.demo-hub-page .demo-site--maya .mr .mr-btn--line:hover {
  background: var(--mr-ink);
  color: #fff;
}

.demo-hub-page .demo-site--maya .mr .mr-btn--gold {
  background: var(--mr-gold);
  border-color: var(--mr-gold);
  color: var(--mr-ink);
}

.demo-hub-page .demo-site--maya .mr .mr-btn--gold:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--maya .mr .mr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* section frame */
.demo-hub-page .demo-site--maya .mr .mr-sec {
  padding: clamp(56px, 7vw, 110px) var(--mr-gutter);
}

.demo-hub-page .demo-site--maya .mr .mr-head {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  max-width: 44rem;
  margin: 0 auto clamp(32px, 5vw, 64px);
  text-align: center;
}

.demo-hub-page .demo-site--maya .mr .mr-head--left {
  justify-items: start;
  margin: 0;
  text-align: left;
}

.demo-hub-page .demo-site--maya .mr .mr-head > p:not(.mr-label) {
  color: var(--mr-muted);
}

.demo-hub-page .demo-site--maya .mr .mr-label {
  color: var(--mr-muted);
}

/* top utility bar */
.demo-hub-page .demo-site--maya .mr .mr-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px var(--mr-gutter);
  background: var(--mr-dark);
  color: #fff;
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--maya .mr .mr-topbar p {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.demo-hub-page .demo-site--maya .mr .mr-topbar p i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mr-gold);
}

.demo-hub-page .demo-site--maya .mr .mr-topbar nav {
  display: flex;
  gap: 22px;
}

.demo-hub-page .demo-site--maya .mr .mr-topbar a:hover {
  color: var(--mr-gold);
}

/* header + logo */
.demo-hub-page .demo-site--maya .mr .mr-header {
  background: #fff;
}

.demo-hub-page .demo-site--maya .mr .mr-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.demo-hub-page .demo-site--maya .mr .mr-logo b {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--mr-dark);
  color: #fff;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--maya .mr .mr-logo span {
  display: grid;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.demo-hub-page .demo-site--maya .mr .mr-logo small {
  margin-bottom: 4px;
  font-family: var(--mr-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mr-muted);
}

.demo-hub-page .demo-site--maya .mr .mr-header > .mr-logo {
  display: flex;
  justify-content: center;
  padding: 26px var(--mr-gutter);
  border-bottom: 1px solid var(--mr-line);
}

.demo-hub-page .demo-site--maya .mr .mr-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px clamp(18px, 3vw, 36px);
  padding: 16px var(--mr-gutter);
  border-bottom: 1px solid var(--mr-line);
}

.demo-hub-page .demo-site--maya .mr .mr-nav a {
  font-size: 0.98rem;
}

.demo-hub-page .demo-site--maya .mr .mr-nav a:hover {
  color: var(--mr-gold);
}

.demo-hub-page .demo-site--maya .mr .mr-nav button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 38px;
  padding: 0 1rem;
  border: 1px solid var(--mr-ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--mr-ink);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--maya .mr .mr-nav button:hover {
  background: var(--mr-ink);
  color: #fff;
}

.demo-hub-page .demo-site--maya .mr .mr-nav button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--mr-gold);
  color: var(--mr-ink);
  font-family: var(--mr-mono);
  font-size: 0.68rem;
}

/* hero slider */
.demo-hub-page .demo-site--maya .mr .mr-hero {
  padding: clamp(16px, 2vw, 28px) var(--mr-gutter) 0;
}

.demo-hub-page .demo-site--maya .mr .mr-hero__stage {
  position: relative;
  aspect-ratio: 1170/600;
  min-height: 360px;
  background: var(--mr-dark);
  overflow: visible;
}

.demo-hub-page .demo-site--maya .mr .mr-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.demo-hub-page .demo-site--maya .mr .mr-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.demo-hub-page .demo-site--maya .mr .mr-hero__card {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 3vw, 50px);
  bottom: clamp(-48px, -3vw, -24px);
  display: grid;
  gap: 0.9rem;
  width: min(480px, 100% - 32px);
  padding: clamp(22px, 3vw, 38px);
  background: #fff;
  box-shadow: 0 18px 50px rgba(37, 40, 46, 0.14);
}

.demo-hub-page .demo-site--maya .mr .mr-hero__card h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  letter-spacing: -0.035em !important;
}

.demo-hub-page .demo-site--maya .mr .mr-hero__meta {
  color: var(--mr-muted);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--maya .mr .mr-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: clamp(60px, 6vw, 84px) 0 0;
}

.demo-hub-page .demo-site--maya .mr .mr-dots button {
  width: 12px;
  height: 12px;
  min-height: 12px !important;
  padding: 0 !important;
  border: 1px solid var(--mr-gold);
  border-radius: 50% !important;
  background: transparent;
  cursor: pointer;
}

.demo-hub-page .demo-site--maya .mr .mr-dots button.is-active {
  background: var(--mr-gold);
}

/* staggered work list */
.demo-hub-page .demo-site--maya .mr .mr-stagger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 90px) clamp(24px, 6vw, 110px);
  align-items: start;
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item:nth-child(even) {
  margin-top: clamp(40px, 8vw, 120px);
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item figure {
  aspect-ratio: 4/3;
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item:hover img {
  transform: scale(1.03);
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item h4 {
  margin-top: 0.8rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item p {
  color: var(--mr-muted);
  max-width: 30rem;
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item span {
  font-size: 0.9rem;
  border-bottom: 1px solid var(--mr-ink);
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 2px;
}

.demo-hub-page .demo-site--maya .mr .mr-stagger__item:hover span {
  color: var(--mr-gold);
  border-color: var(--mr-gold);
}

/* shop */
.demo-hub-page .demo-site--maya .mr .mr-shop {
  background: #f6f4ef;
}

.demo-hub-page .demo-site--maya .mr .mr-shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--maya .mr .mr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-hub-page .demo-site--maya .mr .mr-filters button {
  min-height: 42px;
  padding: 0 1.2rem;
  border: 1px solid var(--mr-line);
  border-radius: 0 !important;
  background: #fff;
  color: var(--mr-ink);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--maya .mr .mr-filters button:hover {
  border-color: var(--mr-ink);
}

.demo-hub-page .demo-site--maya .mr .mr-filters button.is-active {
  background: var(--mr-dark);
  border-color: var(--mr-dark);
  color: #fff;
}

.demo-hub-page .demo-site--maya .mr .mr-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  align-items: start;
}

.demo-hub-page .demo-site--maya .mr .mr-product {
  display: grid;
  gap: 16px;
  align-content: start;
}

.demo-hub-page .demo-site--maya .mr .mr-product--large {
  grid-column: span 2;
  grid-row: span 1;
}

.demo-hub-page .demo-site--maya .mr .mr-product figure {
  position: relative;
  aspect-ratio: 4/5;
  background: #e8e4da;
}

.demo-hub-page .demo-site--maya .mr .mr-product--large figure {
  aspect-ratio: 16/10;
}

.demo-hub-page .demo-site--maya .mr .mr-product img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--maya .mr .mr-product:hover img {
  transform: scale(1.03);
}

.demo-hub-page .demo-site--maya .mr .mr-tag {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: 8px 14px;
  background: var(--mr-gold);
  color: var(--mr-ink);
  font-family: var(--mr-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--maya .mr .mr-product__body {
  display: grid;
  gap: 6px;
}

.demo-hub-page .demo-site--maya .mr .mr-product__body p {
  color: var(--mr-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--maya .mr .mr-product__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.demo-hub-page .demo-site--maya .mr .mr-product__buy strong {
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

/* events */
.demo-hub-page .demo-site--maya .mr .mr-events__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
}

.demo-hub-page .demo-site--maya .mr .mr-event {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  border: 1px solid var(--mr-line);
}

.demo-hub-page .demo-site--maya .mr .mr-event figure {
  position: relative;
  min-height: 260px;
}

.demo-hub-page .demo-site--maya .mr .mr-date {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 0;
  background: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.demo-hub-page .demo-site--maya .mr .mr-date b {
  display: inline-grid;
  place-items: center;
  align-self: stretch;
  padding: 0 10px;
  background: var(--mr-gold);
  color: #fff;
  font-weight: 400;
  font-size: 1.3rem;
}

.demo-hub-page .demo-site--maya .mr .mr-event > div {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: clamp(20px, 2.4vw, 32px);
}

.demo-hub-page .demo-site--maya .mr .mr-event p {
  color: var(--mr-muted);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--maya .mr .mr-event .mr-btn {
  justify-self: start;
  min-height: 42px;
}

.demo-hub-page .demo-site--maya .mr .mr-more {
  margin-top: 28px;
  text-align: center;
}

.demo-hub-page .demo-site--maya .mr .mr-more a {
  border-bottom: 1px solid var(--mr-ink);
  padding-bottom: 2px;
}

.demo-hub-page .demo-site--maya .mr .mr-more a:hover {
  color: var(--mr-gold);
  border-color: var(--mr-gold);
}

/* split panel */
.demo-hub-page .demo-site--maya .mr .mr-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0;
  padding-bottom: 0;
}

.demo-hub-page .demo-site--maya .mr .mr-split {
  padding-left: var(--mr-gutter);
  padding-right: var(--mr-gutter);
}

.demo-hub-page .demo-site--maya .mr .mr-split figure {
  min-height: 360px;
}

.demo-hub-page .demo-site--maya .mr .mr-split__panel {
  display: grid;
  gap: 1.3rem;
  align-content: center;
  justify-items: center;
  padding: clamp(28px, 5vw, 72px);
  background: var(--mr-dark);
  color: #fff;
  text-align: center;
}

.demo-hub-page .demo-site--maya .mr .mr-split__panel p {
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.72);
}

/* commission form */
.demo-hub-page .demo-site--maya .mr .mr-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  max-width: 860px;
  margin: 0 auto;
}

.demo-hub-page .demo-site--maya .mr .mr-form label {
  display: grid;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--mr-muted);
}

.demo-hub-page .demo-site--maya .mr .mr-form .is-wide {
  grid-column: 1/-1;
}

.demo-hub-page .demo-site--maya .mr .mr-form input,
.demo-hub-page .demo-site--maya .mr .mr-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--mr-line);
  border-radius: 0 !important;
  background: #fff;
  color: var(--mr-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--maya .mr .mr-form textarea {
  resize: vertical;
}

.demo-hub-page .demo-site--maya .mr .mr-form input:focus,
.demo-hub-page .demo-site--maya .mr .mr-form textarea:focus {
  outline: 0;
  border-color: var(--mr-ink);
}

.demo-hub-page .demo-site--maya .mr .mr-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.demo-hub-page .demo-site--maya .mr .mr-form__foot small {
  color: var(--mr-muted);
}

/* discover tiles */
.demo-hub-page .demo-site--maya .mr .mr-discover {
  padding-top: 0;
}

.demo-hub-page .demo-site--maya .mr .mr-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}

.demo-hub-page .demo-site--maya .mr .mr-tile {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--mr-dark);
}

.demo-hub-page .demo-site--maya .mr .mr-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(37, 40, 46, 0) 45%, rgba(37, 40, 46, 0.78) 100%);
  pointer-events: none;
}

.demo-hub-page .demo-site--maya .mr .mr-tile span {
  z-index: 2;
}

.demo-hub-page .demo-site--maya .mr .mr-tile img {
  opacity: 1;
  transition: transform 0.8s ease, opacity 0.4s ease;
}

.demo-hub-page .demo-site--maya .mr .mr-tile:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--maya .mr .mr-tile span {
  position: absolute;
  left: 24px;
  bottom: 22px;
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
}

/* about */
.demo-hub-page .demo-site--maya .mr .mr-about {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--mr-line);
}

.demo-hub-page .demo-site--maya .mr .mr-about blockquote {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--maya .mr .mr-about__copy {
  max-width: 36rem;
  color: var(--mr-muted);
  font-size: 0.95rem;
}

/* footer */
.demo-hub-page .demo-site--maya .mr .mr-footer {
  padding: clamp(48px, 6vw, 80px) var(--mr-gutter) 28px;
  border-top: 1px solid var(--mr-line);
}

.demo-hub-page .demo-site--maya .mr .mr-footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 4vw, 56px);
}

.demo-hub-page .demo-site--maya .mr .mr-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--maya .mr .mr-footer h4 {
  margin-bottom: 0.5rem;
  font-size: 1.35rem !important;
}

.demo-hub-page .demo-site--maya .mr .mr-footer a:not(.mr-logo),
.demo-hub-page .demo-site--maya .mr .mr-footer p {
  color: var(--mr-muted);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--maya .mr .mr-footer a:not(.mr-logo):hover {
  color: var(--mr-ink);
}

.demo-hub-page .demo-site--maya .mr .mr-footer__map {
  color: var(--mr-gold) !important;
  font-family: var(--mr-mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--maya .mr .mr-footer input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--mr-line);
  border-radius: 0 !important;
  background: #fff;
  color: var(--mr-ink);
}

.demo-hub-page .demo-site--maya .mr .mr-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-top: clamp(32px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--mr-line);
  color: var(--mr-muted);
  font-size: 0.85rem;
}

/* cart panel */
.demo-hub-page .demo-site--maya .mr .mr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(37, 40, 46, 0.55);
}

.demo-hub-page .demo-site--maya .mr .mr-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: #fff;
  color: var(--mr-ink);
  box-shadow: -20px 0 60px rgba(37, 40, 46, 0.22);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.demo-hub-page .demo-site--maya .mr .mr-cart.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > header,
.demo-hub-page .demo-site--maya .mr .mr-cart > footer {
  padding: 24px 28px;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--mr-line);
}

.demo-hub-page .demo-site--maya .mr .mr-cart > header div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > header p {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > header span {
  color: var(--mr-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--mr-ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--mr-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > header button:hover {
  background: var(--mr-ink);
  color: #fff;
}

.demo-hub-page .demo-site--maya .mr .mr-cart__items {
  flex: 1;
  overflow: auto;
  padding: 8px 28px;
}

.demo-hub-page .demo-site--maya .mr .mr-cart__items > p {
  padding: 24px 0;
  color: var(--mr-muted);
}

.demo-hub-page .demo-site--maya .mr .mr-cart__items article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mr-line);
}

.demo-hub-page .demo-site--maya .mr .mr-cart__items article div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--maya .mr .mr-cart__items article span {
  color: var(--mr-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--maya .mr .mr-cart__items article b {
  font-weight: 400;
}

.demo-hub-page .demo-site--maya .mr .mr-cart__items article button {
  grid-column: 1/-1;
  justify-self: start;
  padding: 0;
  min-height: 0 !important;
  border: 0;
  background: none;
  color: var(--mr-ink);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > footer {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--mr-line);
}

.demo-hub-page .demo-site--maya .mr .mr-cart > footer > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > footer strong {
  font-weight: 400;
  font-size: 1.5rem;
}

.demo-hub-page .demo-site--maya .mr .mr-cart > footer p {
  color: var(--mr-muted);
  font-size: 0.85rem;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--maya .mr .mr-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--maya .mr .mr-product--large {
    grid-column: 1/-1;
  }
  .demo-hub-page .demo-site--maya .mr .mr-events__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--maya .mr .mr-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--maya .mr .mr-split {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 700px) {
  .demo-hub-page .demo-site--maya .mr .mr-topbar nav {
    display: none;
  }
  .demo-hub-page .demo-site--maya .mr .mr-hero__stage {
    aspect-ratio: auto;
    min-height: 0;
    padding-top: 68vw;
  }
  .demo-hub-page .demo-site--maya .mr .mr-slide {
    inset: 0 0 auto 0;
    height: 68vw;
  }
  .demo-hub-page .demo-site--maya .mr .mr-hero__card {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: -44px 12px 0;
  }
  .demo-hub-page .demo-site--maya .mr .mr-dots {
    padding-top: 24px;
  }
  .demo-hub-page .demo-site--maya .mr .mr-stagger,
  .demo-hub-page .demo-site--maya .mr .mr-products,
  .demo-hub-page .demo-site--maya .mr .mr-tiles,
  .demo-hub-page .demo-site--maya .mr .mr-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--maya .mr .mr-stagger__item:nth-child(even) {
    margin-top: 0;
  }
  .demo-hub-page .demo-site--maya .mr .mr-event {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--maya .mr .mr-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--maya .mr .mr-nav {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .demo-hub-page .demo-site--maya .mr .mr-nav > * {
    flex-shrink: 0;
  }}
/* ============================================================
   June & Field (photographer) demo - redesigned layout (editorial / big type).
   Scoped to .demo-site--junefield so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--junefield {
  --jf-bg: #ffffff;
  --jf-ink: #0e0e0e;
  --jf-grey: #8a8a86;
  --jf-soft: #f4f4f2;
  --jf-line: rgba(14, 14, 14, 0.18);
  --jf-accent: #ff4d1c;
  --jf-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --jf-mono: Inter, Arial, sans-serif;
  --jf-gutter: clamp(16px, 2vw, 28px);
  background: var(--jf-bg) !important;
  color: var(--jf-ink);
}

.demo-hub-page .demo-site--junefield .jf {
  position: relative;
  background: var(--jf-bg);
  color: var(--jf-ink);
  font-family: var(--jf-display);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--junefield .jf * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--junefield .jf [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--junefield .jf img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--junefield .jf figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--junefield .jf p {
  margin: 0;
}

.demo-hub-page .demo-site--junefield .jf a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--junefield .jf article {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--junefield .jf ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--junefield .jf h2,
.demo-hub-page .demo-site--junefield .jf h3,
.demo-hub-page .demo-site--junefield .jf h4 {
  margin: 0;
  max-width: none;
  text-transform: uppercase !important;
  font-family: var(--jf-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  color: inherit;
}

.demo-hub-page .demo-site--junefield .jf h3 {
  font-size: clamp(2.4rem, 6vw, 5.6rem) !important;
}

.demo-hub-page .demo-site--junefield .jf h4 {
  font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
  letter-spacing: -0.03em !important;
}

.demo-hub-page .demo-site--junefield .jf .jf-label {
  font-family: var(--jf-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* buttons + links */
.demo-hub-page .demo-site--junefield .jf .jf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.6rem;
  border: 1px solid currentColor;
  border-radius: 0 !important;
  background: transparent;
  font-family: var(--jf-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--junefield .jf .jf-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--jf-ink);
}

.demo-hub-page .demo-site--junefield .jf .jf-btn--light:hover {
  background: var(--jf-accent);
  border-color: var(--jf-accent);
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-btn--ghost {
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-btn--ghost:hover {
  background: #fff;
  color: var(--jf-ink);
}

.demo-hub-page .demo-site--junefield .jf .jf-btn--dark {
  background: var(--jf-ink);
  border-color: var(--jf-ink);
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-btn--dark:hover {
  background: var(--jf-accent);
  border-color: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--junefield .jf .jf-link {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0 !important;
  background: none;
  color: inherit;
  font-family: var(--jf-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--junefield .jf .jf-link:hover {
  color: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-sec {
  padding: clamp(64px, 8vw, 128px) var(--jf-gutter);
}

.demo-hub-page .demo-site--junefield .jf .jf-head {
  display: grid;
  gap: 1.2rem;
  max-width: 60rem;
  margin-bottom: clamp(32px, 5vw, 72px);
}

.demo-hub-page .demo-site--junefield .jf .jf-head > p:not(.jf-label) {
  max-width: 36rem;
  color: var(--jf-grey);
}

.demo-hub-page .demo-site--junefield .jf .jf-label {
  color: var(--jf-grey);
}

/* header (overlays the hero) */
.demo-hub-page .demo-site--junefield .jf .jf-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 22px var(--jf-gutter);
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
}

.demo-hub-page .demo-site--junefield .jf .jf-brand strong {
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-brand span {
  font-family: var(--jf-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.demo-hub-page .demo-site--junefield .jf .jf-header nav {
  display: flex;
  gap: clamp(14px, 2.4vw, 32px);
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  background: rgba(14, 14, 14, 0.18);
}

.demo-hub-page .demo-site--junefield .jf .jf-header nav a {
  font-family: var(--jf-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-header nav a:hover,
.demo-hub-page .demo-site--junefield .jf .jf-header__cta:hover {
  color: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-header__cta {
  justify-self: end;
  font-family: var(--jf-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* hero */
.demo-hub-page .demo-site--junefield .jf .jf-hero {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: clamp(640px, 92vh, 900px);
  padding: 110px var(--jf-gutter) 0;
  color: #fff;
  background: #1b1b1b;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__bg {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.5) 0%, rgba(14, 14, 14, 0.08) 38%, rgba(14, 14, 14, 0.7) 100%);
}

.demo-hub-page .demo-site--junefield .jf .jf-hero > *:not(.jf-hero__bg) {
  position: relative;
  z-index: 2;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__label {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--jf-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__label::after {
  content: "";
  width: 2px;
  height: 1.1em;
  background: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__copy {
  display: grid;
  gap: 1.3rem;
  max-width: 46rem;
  margin: clamp(24px, 4vw, 56px) 0;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__copy h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.6rem) !important;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__copy p {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__word {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 calc(var(--jf-gutter) * -0.3);
  font-size: clamp(3.4rem, 12.4vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__word span {
  display: block;
  line-height: 0.78;
  padding-bottom: 0.04em;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__word a {
  align-self: flex-end;
  margin-bottom: 0.45rem;
  font-family: var(--jf-mono);
  font-size: clamp(0.62rem, 0.9vw, 0.8rem);
  letter-spacing: 0.1em;
  line-height: 1;
}

.demo-hub-page .demo-site--junefield .jf .jf-hero__word a:hover {
  color: var(--jf-accent);
}

/* image strip */
.demo-hub-page .demo-site--junefield .jf .jf-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--jf-gutter);
  padding: var(--jf-gutter);
}

.demo-hub-page .demo-site--junefield .jf .jf-strip figure {
  aspect-ratio: 3/4;
}

.demo-hub-page .demo-site--junefield .jf .jf-strip img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--junefield .jf .jf-strip figure:hover img {
  transform: scale(1.05);
}

/* statement */
.demo-hub-page .demo-site--junefield .jf .jf-statement {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
  grid-template-rows: auto auto auto;
  gap: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px);
  align-items: start;
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__text {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(2.2rem, 5.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__text span {
  color: var(--jf-ink);
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__photo {
  position: relative;
  grid-column: 2;
  grid-row: 1/3;
  align-self: end;
  aspect-ratio: 4/5;
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__photo img {
  filter: grayscale(1);
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__photo i {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__note {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 1.1rem;
  max-width: 26rem;
  align-self: end;
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__note h4 {
  font-size: 1.3rem !important;
  letter-spacing: -0.01em !important;
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__note p {
  color: var(--jf-grey);
}

.demo-hub-page .demo-site--junefield .jf .jf-statement__caption {
  grid-column: 2;
  grid-row: 3;
  margin-top: -28px;
  font-family: var(--jf-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

/* sessions */
.demo-hub-page .demo-site--junefield .jf .jf-session-list {
  display: grid;
  gap: clamp(20px, 2.4vw, 36px);
}

.demo-hub-page .demo-site--junefield .jf .jf-session {
  padding: 14px;
  background: var(--jf-soft);
}

.demo-hub-page .demo-site--junefield .jf .jf-session__media {
  position: relative;
  display: block;
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-session__media figure {
  aspect-ratio: 16/6.4;
  background: #222;
}

.demo-hub-page .demo-site--junefield .jf .jf-session__media figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0) 30%, rgba(14, 14, 14, 0.66) 100%);
}

.demo-hub-page .demo-site--junefield .jf .jf-session__media img {
  transition: transform 1s ease;
}

.demo-hub-page .demo-site--junefield .jf .jf-session__media:hover img {
  transform: scale(1.03);
}

.demo-hub-page .demo-site--junefield .jf .jf-session__media .jf-label {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 3vw, 40px);
  bottom: clamp(62px, 8vw, 118px);
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-session__media b {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 3vw, 40px);
  bottom: clamp(10px, 2vw, 28px);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-session__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 6px 6px;
}

.demo-hub-page .demo-site--junefield .jf .jf-session__row p {
  max-width: 36rem;
  color: var(--jf-grey);
}

/* selected stories (dark) */
.demo-hub-page .demo-site--junefield .jf .jf-stories {
  background: #000;
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-stories .jf-label {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--junefield .jf .jf-stories__head {
  display: grid;
  gap: 1.4rem;
  max-width: 70rem;
  margin-bottom: clamp(36px, 5vw, 72px);
}

.demo-hub-page .demo-site--junefield .jf .jf-stories__head h3 {
  font-size: clamp(3.4rem, 11vw, 10.5rem) !important;
  letter-spacing: -0.055em !important;
  line-height: 0.86 !important;
}

.demo-hub-page .demo-site--junefield .jf .jf-stories__head > p:not(.jf-label) {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.72);
}

.demo-hub-page .demo-site--junefield .jf .jf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 0.6rem;
}

.demo-hub-page .demo-site--junefield .jf .jf-filters button {
  min-height: 0 !important;
  padding: 0 0 4px !important;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--jf-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--junefield .jf .jf-filters button:hover {
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-filters button.is-active {
  color: #fff;
  border-bottom-color: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px) clamp(14px, 2vw, 28px);
  align-items: start;
}

.demo-hub-page .demo-site--junefield .jf .jf-story {
  display: grid;
  gap: 18px;
  align-content: start;
}

.demo-hub-page .demo-site--junefield .jf .jf-story figure {
  background: #1b1b1b;
}

.demo-hub-page .demo-site--junefield .jf .jf-story img {
  transition: transform 0.9s ease;
}

.demo-hub-page .demo-site--junefield .jf .jf-story:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--junefield .jf .jf-story > div {
  display: grid;
  gap: 8px;
}

.demo-hub-page .demo-site--junefield .jf .jf-story p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.92rem;
  max-width: 26rem;
}

.demo-hub-page .demo-site--junefield .jf .jf-story .jf-link {
  margin-top: 6px;
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-story--lead {
  grid-column: 1/span 5;
}

.demo-hub-page .demo-site--junefield .jf .jf-story--lead figure {
  aspect-ratio: 4/5;
}

.demo-hub-page .demo-site--junefield .jf .jf-story--two {
  grid-column: 7/span 3;
  margin-top: clamp(40px, 9vw, 140px);
}

.demo-hub-page .demo-site--junefield .jf .jf-story--two figure {
  aspect-ratio: 3/4;
}

.demo-hub-page .demo-site--junefield .jf .jf-story--three {
  grid-column: 10/span 3;
}

.demo-hub-page .demo-site--junefield .jf .jf-story--three figure {
  aspect-ratio: 3/4;
}

.demo-hub-page .demo-site--junefield .jf .jf-story--wide {
  grid-column: 3/span 8;
}

.demo-hub-page .demo-site--junefield .jf .jf-story--wide figure {
  aspect-ratio: 16/9;
}

/* experience */
.demo-hub-page .demo-site--junefield .jf .jf-experience {
  position: relative;
  margin-top: clamp(32px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: center;
  margin: 0 var(--jf-gutter);
  padding-left: 0;
  padding-right: 0;
}

.demo-hub-page .demo-site--junefield .jf .jf-corner {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 0 solid var(--jf-ink);
  pointer-events: none;
}

.demo-hub-page .demo-site--junefield .jf .jf-corner--tl {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}

.demo-hub-page .demo-site--junefield .jf .jf-corner--tr {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}

.demo-hub-page .demo-site--junefield .jf .jf-experience__copy {
  display: grid;
  gap: 1.3rem;
  padding: 12px 0;
}

.demo-hub-page .demo-site--junefield .jf .jf-experience__copy > p:not(.jf-label) {
  max-width: 34rem;
  color: var(--jf-grey);
}

.demo-hub-page .demo-site--junefield .jf .jf-experience ol {
  display: grid;
  gap: 0;
  margin-top: 1rem;
  border-top: 1px solid var(--jf-line);
}

.demo-hub-page .demo-site--junefield .jf .jf-experience li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--jf-line);
}

.demo-hub-page .demo-site--junefield .jf .jf-experience li span {
  font-family: var(--jf-mono);
  font-size: 0.78rem;
  color: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-experience__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jf-gutter);
  align-items: end;
}

.demo-hub-page .demo-site--junefield .jf .jf-experience__images figure {
  aspect-ratio: 3/4;
}

.demo-hub-page .demo-site--junefield .jf .jf-experience__images figure:first-child {
  margin-bottom: clamp(32px, 7vw, 100px);
}

/* pricing */
.demo-hub-page .demo-site--junefield .jf .jf-pricing {
  background: var(--jf-soft);
}

.demo-hub-page .demo-site--junefield .jf .jf-pricing__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jf-gutter);
}

.demo-hub-page .demo-site--junefield .jf .jf-pricing__options article {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  padding: clamp(24px, 3.4vw, 48px);
  background: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-pricing__options strong {
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-pricing__options p {
  max-width: 28rem;
  color: var(--jf-grey);
}

/* faq */
.demo-hub-page .demo-site--junefield .jf .jf-faq__items {
  border-top: 1px solid var(--jf-ink);
}

.demo-hub-page .demo-site--junefield .jf .jf-faq__items article {
  border-bottom: 1px solid var(--jf-line);
}

.demo-hub-page .demo-site--junefield .jf .jf-faq__items button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 0 !important;
  padding: 26px 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: none;
  color: var(--jf-ink);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.demo-hub-page .demo-site--junefield .jf .jf-faq__items button:hover {
  color: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-faq__items button span {
  flex: none;
  font-family: var(--jf-mono);
  font-size: 1.4rem;
}

.demo-hub-page .demo-site--junefield .jf .jf-faq__items article p {
  display: none;
  max-width: 40rem;
  padding: 0 0 26px;
  color: var(--jf-grey);
}

.demo-hub-page .demo-site--junefield .jf .jf-faq__items article.is-open p {
  display: block;
}

/* reviews */
.demo-hub-page .demo-site--junefield .jf .jf-reviews {
  position: relative;
  display: grid;
  gap: 1.6rem;
  justify-items: start;
  background: radial-gradient(ellipse 60% 70% at 70% 60%, rgba(255, 77, 28, 0.13), rgba(255, 77, 28, 0) 70%), #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-quotes {
  display: grid;
  max-width: 70rem;
  padding: clamp(10px, 3vw, 40px) 0;
}

.demo-hub-page .demo-site--junefield .jf .jf-quote {
  grid-area: 1/1;
  display: grid;
  gap: 1.6rem;
  align-content: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.demo-hub-page .demo-site--junefield .jf .jf-quote.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.demo-hub-page .demo-site--junefield .jf .jf-quote blockquote {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-quote figcaption {
  font-family: var(--jf-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jf-grey);
}

.demo-hub-page .demo-site--junefield .jf .jf-dots {
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-hub-page .demo-site--junefield .jf .jf-dots button {
  width: 6px;
  height: 6px;
  min-height: 6px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50% !important;
  background: var(--jf-grey);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.demo-hub-page .demo-site--junefield .jf .jf-dots button.is-active {
  width: 30px;
  border-radius: 0 !important;
  background: var(--jf-ink);
}

/* enquire */
.demo-hub-page .demo-site--junefield .jf .jf-enquire {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: stretch;
  background: var(--jf-ink);
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-enquire__visual {
  position: relative;
  min-height: 440px;
}

.demo-hub-page .demo-site--junefield .jf .jf-enquire__visual figure {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--junefield .jf .jf-enquire__visual figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.05) 40%, rgba(14, 14, 14, 0.75) 100%);
}

.demo-hub-page .demo-site--junefield .jf .jf-enquire__visual p {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  align-content: center;
  padding: clamp(0px, 2vw, 24px) 0;
}

.demo-hub-page .demo-site--junefield .jf .jf-form__head {
  grid-column: 1/-1;
  display: grid;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.demo-hub-page .demo-site--junefield .jf .jf-form__head .jf-label {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--junefield .jf .jf-form__head h3 {
  font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
}

.demo-hub-page .demo-site--junefield .jf .jf-form label {
  display: grid;
  gap: 8px;
  font-family: var(--jf-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--junefield .jf .jf-form .is-wide {
  grid-column: 1/-1;
}

.demo-hub-page .demo-site--junefield .jf .jf-form input,
.demo-hub-page .demo-site--junefield .jf .jf-form select,
.demo-hub-page .demo-site--junefield .jf .jf-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0 !important;
  background: transparent;
  color: #fff;
  font-family: var(--jf-display);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.demo-hub-page .demo-site--junefield .jf .jf-form select option {
  color: #000;
}

.demo-hub-page .demo-site--junefield .jf .jf-form textarea {
  resize: vertical;
}

.demo-hub-page .demo-site--junefield .jf .jf-form input::-moz-placeholder, .demo-hub-page .demo-site--junefield .jf .jf-form textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.demo-hub-page .demo-site--junefield .jf .jf-form input::placeholder,
.demo-hub-page .demo-site--junefield .jf .jf-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.demo-hub-page .demo-site--junefield .jf .jf-form input:focus,
.demo-hub-page .demo-site--junefield .jf .jf-form select:focus,
.demo-hub-page .demo-site--junefield .jf .jf-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-form .jf-btn--dark {
  background: #fff;
  border-color: #fff;
  color: var(--jf-ink);
}

.demo-hub-page .demo-site--junefield .jf .jf-form .jf-btn--dark:hover {
  background: var(--jf-accent);
  border-color: var(--jf-accent);
  color: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.demo-hub-page .demo-site--junefield .jf .jf-form__foot small {
  color: rgba(255, 255, 255, 0.6);
}

/* footer */
.demo-hub-page .demo-site--junefield .jf .jf-footer {
  padding: clamp(56px, 7vw, 96px) var(--jf-gutter) 0;
  background: #fff;
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__cols {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 1.4fr;
  gap: clamp(24px, 4vw, 64px);
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__cols > div {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__cols .jf-label {
  margin-bottom: 0.8rem;
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__cols p,
.demo-hub-page .demo-site--junefield .jf .jf-footer__cols a:not(.jf-link) {
  font-size: 1.05rem;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__cols a:not(.jf-link):hover {
  color: var(--jf-accent);
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 24px;
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__word {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: clamp(48px, 7vw, 110px) calc(var(--jf-gutter) * -0.3) 0;
  font-size: clamp(3.4rem, 12.4vw, 12rem);
  letter-spacing: -0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__word span {
  display: block;
  line-height: 0.8;
}

.demo-hub-page .demo-site--junefield .jf .jf-footer__word small {
  align-self: flex-end;
  margin-bottom: 0.9rem;
  font-family: var(--jf-mono);
  font-size: clamp(0.6rem, 0.8vw, 0.76rem);
  letter-spacing: 0.08em;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--junefield .jf .jf-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-header nav {
    display: none;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--junefield .jf .jf-strip figure:nth-child(n+5) {
    display: none;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-statement {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--junefield .jf .jf-statement__photo {
    grid-column: 1;
    grid-row: auto;
    max-width: 420px;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-statement__note {
    grid-row: auto;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-statement__caption {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
    text-align: left;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-story--lead,
  .demo-hub-page .demo-site--junefield .jf .jf-story--two,
  .demo-hub-page .demo-site--junefield .jf .jf-story--three,
  .demo-hub-page .demo-site--junefield .jf .jf-story--wide {
    grid-column: 1/-1;
    margin-top: 0;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-experience,
  .demo-hub-page .demo-site--junefield .jf .jf-enquire,
  .demo-hub-page .demo-site--junefield .jf .jf-pricing__options,
  .demo-hub-page .demo-site--junefield .jf .jf-footer__cols {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--junefield .jf .jf-header {
    padding: 16px var(--jf-gutter);
  }
  .demo-hub-page .demo-site--junefield .jf .jf-brand span {
    display: none;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-brand strong {
    white-space: nowrap;
    font-size: 1.25rem;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-header__cta {
    white-space: nowrap;
    font-size: 0.64rem;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-hero {
    padding-top: 96px;
    min-height: 640px;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-hero__label {
    text-align: center;
    font-size: 0.66rem;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-hero__word {
    font-size: 17vw;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-footer__word {
    font-size: 17vw;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-hero__word a {
    display: none;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-hero__word {
    justify-content: flex-start;
    gap: 0.18em;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--junefield .jf .jf-strip figure:nth-child(n+5) {
    display: none;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-session__media figure {
    aspect-ratio: 4/3;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-session__media .jf-label {
    bottom: 64px;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-experience__images {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--junefield .jf .jf-experience__images figure:first-child {
    margin-bottom: 0;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--junefield .jf .jf-footer__word small {
    display: none;
  }
  .demo-hub-page .demo-site--junefield .jf .jf-footer__word {
    justify-content: flex-start;
    gap: 0.18em;
  }}
/* ============================================================
   Northline Objects (jewelry) demo - redesigned layout (luxury boutique).
   Scoped to .demo-site--northline so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--northline {
  --nl-bg: #ffffff;
  --nl-ink: #2a2826;
  --nl-muted: #6f6c68;
  --nl-olive: #383e28;
  --nl-soft: #f7f5f1;
  --nl-line: #e6e3de;
  --nl-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --nl-mono: Inter, Arial, sans-serif;
  --nl-gutter: max(20px, calc((100% - 1300px) / 2));
  background: var(--nl-bg) !important;
  color: var(--nl-ink);
}

.demo-hub-page .demo-site--northline .nl {
  position: relative;
  background: var(--nl-bg);
  color: var(--nl-ink);
  font-family: var(--nl-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--northline .nl * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--northline .nl [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--northline .nl img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--northline .nl figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--northline .nl form {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--northline .nl p {
  margin: 0;
}

.demo-hub-page .demo-site--northline .nl a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--northline .nl article {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--northline .nl ul,
.demo-hub-page .demo-site--northline .nl dl,
.demo-hub-page .demo-site--northline .nl dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--northline .nl h2,
.demo-hub-page .demo-site--northline .nl h3,
.demo-hub-page .demo-site--northline .nl h4 {
  margin: 0;
  max-width: none;
  text-transform: none !important;
  font-family: var(--nl-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
  color: inherit;
}

.demo-hub-page .demo-site--northline .nl h3 {
  font-size: clamp(2.2rem, 4.6vw, 4rem) !important;
}

.demo-hub-page .demo-site--northline .nl h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--northline .nl .nl-label {
  font-family: var(--nl-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-muted);
}

/* buttons */
.demo-hub-page .demo-site--northline .nl .nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.9rem;
  border: 1px solid var(--nl-olive);
  border-radius: 0 !important;
  background: transparent;
  color: var(--nl-olive);
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--northline .nl .nl-btn--olive {
  background: var(--nl-olive);
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-btn--olive:hover {
  background: #fff;
  color: var(--nl-olive);
}

.demo-hub-page .demo-site--northline .nl .nl-btn--line:hover {
  background: var(--nl-olive);
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-btn--ghost {
  border-color: #fff;
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-btn--ghost:hover {
  background: #fff;
  color: var(--nl-olive);
}

.demo-hub-page .demo-site--northline .nl .nl-btn--small {
  min-height: 42px;
  padding: 0 1.3rem;
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--northline .nl .nl-btn--small:hover {
  background: var(--nl-olive);
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.demo-hub-page .demo-site--northline .nl .nl-sec {
  padding: clamp(64px, 8vw, 120px) var(--nl-gutter);
}

.demo-hub-page .demo-site--northline .nl .nl-head {
  display: grid;
  gap: 1rem;
  justify-items: center;
  max-width: 44rem;
  margin: 0 auto clamp(28px, 4vw, 52px);
  text-align: center;
}

.demo-hub-page .demo-site--northline .nl .nl-head > p:not(.nl-label) {
  color: var(--nl-muted);
}

/* header */
.demo-hub-page .demo-site--northline .nl .nl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--nl-gutter);
}

.demo-hub-page .demo-site--northline .nl .nl-brand {
  font-size: 1.7rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--northline .nl .nl-brand span {
  font-family: var(--nl-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  vertical-align: middle;
  margin-left: 0.4rem;
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-header nav {
  display: flex;
  gap: clamp(16px, 2.6vw, 34px);
  margin-left: auto;
}

.demo-hub-page .demo-site--northline .nl .nl-header nav a {
  font-size: 1.02rem;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.demo-hub-page .demo-site--northline .nl .nl-header nav a:hover {
  border-color: var(--nl-ink);
}

.demo-hub-page .demo-site--northline .nl .nl-tools {
  display: flex;
  align-items: center;
  gap: 22px;
}

.demo-hub-page .demo-site--northline .nl .nl-tools a {
  font-size: 1rem;
}

.demo-hub-page .demo-site--northline .nl .nl-tools button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0 1.1rem;
  border: 1px solid var(--nl-ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--nl-ink);
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--northline .nl .nl-tools button:hover {
  background: var(--nl-ink);
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-tools button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--nl-olive);
  color: #fff;
  font-family: var(--nl-mono);
  font-size: 0.66rem;
}

/* hero collage */
.demo-hub-page .demo-site--northline .nl .nl-hero {
  position: relative;
  min-height: clamp(700px, 56vw, 820px);
  margin: 0 var(--nl-gutter);
  display: grid;
  place-items: center;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__img {
  position: absolute;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__img--a {
  left: 0;
  bottom: 0;
  width: 25%;
  aspect-ratio: 1.45/1;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__img--b {
  right: 0;
  top: 24px;
  width: 25%;
  aspect-ratio: 1.45/1;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__img--c {
  left: 9%;
  top: 24px;
  width: 17%;
  aspect-ratio: 1.3/1;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__img--c img {
  filter: grayscale(1);
}

.demo-hub-page .demo-site--northline .nl .nl-hero__img--d {
  left: 0;
  top: 17%;
  width: 8%;
  aspect-ratio: 0.88/1;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__img--e {
  right: 10%;
  bottom: 0;
  width: 17.5%;
  aspect-ratio: 1.4/1;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__img--f {
  right: 0;
  bottom: 14%;
  width: 8.5%;
  aspect-ratio: 0.88/1;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  max-width: 34rem;
  padding: 0 20px;
  text-align: center;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__copy h2 {
  font-size: clamp(2.8rem, 5.4vw, 5.2rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.98 !important;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__sub {
  max-width: 28rem;
  color: var(--nl-muted);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__down {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 0.4rem;
  border: 1px solid var(--nl-ink);
  font-size: 1.4rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--northline .nl .nl-hero__down:hover {
  background: var(--nl-ink);
  color: #fff;
}

/* materials strip */
.demo-hub-page .demo-site--northline .nl .nl-materials {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  padding: clamp(40px, 5vw, 72px) var(--nl-gutter);
}

.demo-hub-page .demo-site--northline .nl .nl-materials ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(18px, 3.2vw, 46px);
}

.demo-hub-page .demo-site--northline .nl .nl-materials li {
  font-size: clamp(1.2rem, 1.9vw, 1.8rem);
  letter-spacing: -0.03em;
}

/* shop */
.demo-hub-page .demo-site--northline .nl .nl-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--northline .nl .nl-filters button {
  min-height: 0 !important;
  padding: 0 0 4px !important;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0 !important;
  background: none;
  color: var(--nl-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--northline .nl .nl-filters button:hover {
  color: var(--nl-ink);
}

.demo-hub-page .demo-site--northline .nl .nl-filters button.is-active {
  color: var(--nl-ink);
  border-bottom-color: var(--nl-ink);
}

.demo-hub-page .demo-site--northline .nl .nl-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 52px) clamp(16px, 2vw, 30px);
}

.demo-hub-page .demo-site--northline .nl .nl-product {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.demo-hub-page .demo-site--northline .nl .nl-product figure {
  position: relative;
  width: 100%;
  aspect-ratio: 5/6;
  margin-bottom: 14px;
  background: var(--nl-soft);
}

.demo-hub-page .demo-site--northline .nl .nl-product img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--northline .nl .nl-product:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--northline .nl .nl-tag {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: 7px 14px;
  background: var(--nl-olive);
  color: #fff;
  font-family: var(--nl-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--northline .nl .nl-product small {
  color: var(--nl-muted);
  font-size: 0.88rem;
}

.demo-hub-page .demo-site--northline .nl .nl-product strong {
  font-weight: 400;
  font-size: 1.15rem;
}

.demo-hub-page .demo-site--northline .nl .nl-product .nl-btn {
  margin-top: 10px;
}

/* about */
.demo-hub-page .demo-site--northline .nl .nl-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  background: var(--nl-soft);
}

.demo-hub-page .demo-site--northline .nl .nl-about__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}

.demo-hub-page .demo-site--northline .nl .nl-about__copy > p:not(.nl-label) {
  max-width: 34rem;
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-about__copy ul {
  display: grid;
  gap: 0.9rem;
  width: 100%;
  max-width: 34rem;
  padding: 1rem 0;
  border-block: 1px solid var(--nl-line);
}

.demo-hub-page .demo-site--northline .nl .nl-about__copy li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 12px;
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--northline .nl .nl-about__copy li b {
  font-weight: 400;
}

.demo-hub-page .demo-site--northline .nl .nl-about__copy li span {
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-about__imgs {
  position: relative;
  min-height: 560px;
}

.demo-hub-page .demo-site--northline .nl .nl-about__tall {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  aspect-ratio: 4/5;
}

.demo-hub-page .demo-site--northline .nl .nl-about__small {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56%;
  aspect-ratio: 1/1;
  border: 10px solid var(--nl-soft);
}

/* lookbook + hotspots */
.demo-hub-page .demo-site--northline .nl .nl-lookbook {
  position: relative;
}

.demo-hub-page .demo-site--northline .nl .nl-lookbook figure {
  aspect-ratio: 16/9;
  min-height: 0;
}

.demo-hub-page .demo-site--northline .nl .nl-lookbook figure img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 52.6%;
     object-position: 50% 52.6%;
}

.demo-hub-page .demo-site--northline .nl .nl-lookbook__label {
  position: absolute;
  left: var(--nl-gutter);
  bottom: 18px;
  z-index: 2;
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-hot {
  position: absolute;
  z-index: 3;
  translate: -50% -50%;
}

.demo-hub-page .demo-site--northline .nl .nl-hot > button {
  display: block;
  width: 24px;
  height: 24px;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50% !important;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.35);
  cursor: pointer;
  animation: nl-pulse 2.4s ease-in-out infinite;
}

.demo-hub-page .demo-site--northline .nl .nl-hot--one {
  left: 28%;
  top: 57%;
}

.demo-hub-page .demo-site--northline .nl .nl-hot--two {
  left: 63%;
  top: 46%;
}

.demo-hub-page .demo-site--northline .nl .nl-hot--three {
  left: 54%;
  top: 84%;
}

.demo-hub-page .demo-site--northline .nl .nl-hot--four {
  left: 83%;
  top: 69%;
}

.demo-hub-page .demo-site--northline .nl .nl-hot--four .nl-hot__card {
  left: auto;
  right: -14px;
  translate: 0 8px;
}

.demo-hub-page .demo-site--northline .nl .nl-hot--four:hover .nl-hot__card,
.demo-hub-page .demo-site--northline .nl .nl-hot--four:focus-within .nl-hot__card {
  translate: 0 0;
}

.demo-hub-page .demo-site--northline .nl .nl-hot__card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  display: grid;
  gap: 4px;
  width: 220px;
  padding: 16px 18px;
  background: #fff;
  color: var(--nl-ink);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  translate: -50% 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0.25s;
}

.demo-hub-page .demo-site--northline .nl .nl-hot__card b {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--northline .nl .nl-hot__card em {
  font-style: normal;
  color: var(--nl-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--northline .nl .nl-hot__card strong {
  font-weight: 400;
  margin-bottom: 8px;
}

.demo-hub-page .demo-site--northline .nl .nl-hot:hover .nl-hot__card,
.demo-hub-page .demo-site--northline .nl .nl-hot:focus-within .nl-hot__card {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
  transition-delay: 0s;
}
/* process: overlapping cards */
.demo-hub-page .demo-site--northline .nl .nl-process__stage {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 640px;
}

.demo-hub-page .demo-site--northline .nl .nl-process__photo {
  width: min(46%, 640px);
  aspect-ratio: 1/1.08;
}

.demo-hub-page .demo-site--northline .nl .nl-process__photo img {
  filter: grayscale(1);
}

.demo-hub-page .demo-site--northline .nl .nl-card {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(24px, 3vw, 44px);
}

.demo-hub-page .demo-site--northline .nl .nl-card p {
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--northline .nl .nl-card--light {
  left: 2%;
  bottom: 0;
  width: min(32%, 420px);
  background: var(--nl-soft);
}

.demo-hub-page .demo-site--northline .nl .nl-card--light p {
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-card--light ul {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

.demo-hub-page .demo-site--northline .nl .nl-card--light li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 8px;
  font-size: 0.88rem;
}

.demo-hub-page .demo-site--northline .nl .nl-card--light li b {
  font-weight: 400;
  color: var(--nl-olive);
}

.demo-hub-page .demo-site--northline .nl .nl-card--light li span {
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-card--olive {
  right: 2%;
  top: 14%;
  width: min(30%, 400px);
  background: var(--nl-olive);
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-card--olive p {
  color: rgba(255, 255, 255, 0.78);
}

.demo-hub-page .demo-site--northline .nl .nl-card--olive .nl-btn {
  justify-self: start;
  margin-top: 0.4rem;
}

/* custom */
.demo-hub-page .demo-site--northline .nl .nl-custom {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
  background: var(--nl-soft);
}

.demo-hub-page .demo-site--northline .nl .nl-custom__copy {
  display: grid;
  gap: 1.3rem;
}

.demo-hub-page .demo-site--northline .nl .nl-custom__copy > p:not(.nl-label) {
  max-width: 32rem;
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-custom__copy figure {
  aspect-ratio: 4/3;
  margin-top: 0.6rem;
}

.demo-hub-page .demo-site--northline .nl .nl-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}

.demo-hub-page .demo-site--northline .nl .nl-form label {
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-form .is-wide {
  grid-column: 1/-1;
}

.demo-hub-page .demo-site--northline .nl .nl-form input,
.demo-hub-page .demo-site--northline .nl .nl-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #bdb9b2;
  border-radius: 0 !important;
  background: transparent;
  color: var(--nl-ink);
  font-size: 1rem;
}

.demo-hub-page .demo-site--northline .nl .nl-form textarea {
  resize: vertical;
}

.demo-hub-page .demo-site--northline .nl .nl-form input:focus,
.demo-hub-page .demo-site--northline .nl .nl-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--nl-olive);
}

.demo-hub-page .demo-site--northline .nl .nl-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.demo-hub-page .demo-site--northline .nl .nl-form__foot small {
  color: var(--nl-muted);
}

/* local */
.demo-hub-page .demo-site--northline .nl .nl-local {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

.demo-hub-page .demo-site--northline .nl .nl-local figure {
  aspect-ratio: 4/3.3;
}

.demo-hub-page .demo-site--northline .nl .nl-local__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
}

.demo-hub-page .demo-site--northline .nl .nl-local__copy > p:not(.nl-label) {
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-local dl {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--nl-line);
}

.demo-hub-page .demo-site--northline .nl .nl-local dl > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--nl-line);
}

.demo-hub-page .demo-site--northline .nl .nl-local dt {
  font-family: var(--nl-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nl-muted);
  padding-top: 4px;
}

.demo-hub-page .demo-site--northline .nl .nl-local dd {
  display: grid;
  gap: 2px;
  color: var(--nl-muted);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--northline .nl .nl-local dd strong {
  font-weight: 400;
  color: var(--nl-ink);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

/* newsletter + instagram */
.demo-hub-page .demo-site--northline .nl .nl-news {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  padding-top: 0;
  text-align: center;
}

.demo-hub-page .demo-site--northline .nl .nl-news h3 {
  max-width: 16ch;
}

.demo-hub-page .demo-site--northline .nl .nl-news__form {
  display: flex;
  width: min(100%, 620px);
  background: var(--nl-soft);
}

.demo-hub-page .demo-site--northline .nl .nl-news__form input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  color: var(--nl-ink);
  font-size: 1rem;
}

.demo-hub-page .demo-site--northline .nl .nl-news__form input:focus {
  outline: 0;
}

.demo-hub-page .demo-site--northline .nl .nl-news__form button {
  padding: 0 1.8rem !important;
  min-height: 56px !important;
  border: 0;
  border-left: 1px solid var(--nl-line);
  border-radius: 0 !important;
  background: transparent;
  color: var(--nl-ink);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--northline .nl .nl-news__form button:hover {
  background: var(--nl-olive);
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-news__ok {
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-insta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 24px);
  width: 100%;
  margin-top: clamp(28px, 4vw, 56px);
}

.demo-hub-page .demo-site--northline .nl .nl-insta figure {
  aspect-ratio: 1/1;
}

.demo-hub-page .demo-site--northline .nl .nl-insta img {
  transition: transform 0.7s ease;
}

.demo-hub-page .demo-site--northline .nl .nl-insta figure:hover img {
  transform: scale(1.06);
}

/* footer */
.demo-hub-page .demo-site--northline .nl .nl-footer {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
  padding: clamp(40px, 5vw, 72px) var(--nl-gutter) 32px;
  border-top: 1px solid var(--nl-line);
  text-align: center;
}

.demo-hub-page .demo-site--northline .nl .nl-footer__logo {
  display: grid;
  place-content: center;
  gap: 4px;
  width: 190px;
  height: 190px;
  border: 1px solid var(--nl-line);
  border-radius: 50%;
}

.demo-hub-page .demo-site--northline .nl .nl-footer__logo b {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.demo-hub-page .demo-site--northline .nl .nl-footer__logo span {
  font-family: var(--nl-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-footer__logo small {
  margin-top: 8px;
  font-family: var(--nl-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}

.demo-hub-page .demo-site--northline .nl .nl-footer nav a {
  font-size: 1.02rem;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.demo-hub-page .demo-site--northline .nl .nl-footer nav a:hover {
  border-color: var(--nl-ink);
}

.demo-hub-page .demo-site--northline .nl .nl-footer__social {
  display: flex;
  gap: 10px;
}

.demo-hub-page .demo-site--northline .nl .nl-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--nl-line);
  border-radius: 50%;
  font-family: var(--nl-mono);
  font-size: 0.7rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--northline .nl .nl-footer__social a:hover {
  background: var(--nl-olive);
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-footer > p {
  width: 100%;
  padding-top: 22px;
  border-top: 1px solid var(--nl-line);
  color: var(--nl-muted);
  font-size: 0.88rem;
}

/* cart */
.demo-hub-page .demo-site--northline .nl .nl-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(42, 40, 38, 0.5);
}

.demo-hub-page .demo-site--northline .nl .nl-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: #fff;
  color: var(--nl-ink);
  box-shadow: -20px 0 60px rgba(42, 40, 38, 0.2);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.demo-hub-page .demo-site--northline .nl .nl-cart.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > header,
.demo-hub-page .demo-site--northline .nl .nl-cart > footer {
  padding: 24px 28px;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--nl-line);
}

.demo-hub-page .demo-site--northline .nl .nl-cart > header div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > header p {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > header span {
  color: var(--nl-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--nl-ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--nl-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > header button:hover {
  background: var(--nl-ink);
  color: #fff;
}

.demo-hub-page .demo-site--northline .nl .nl-cart__items {
  flex: 1;
  overflow: auto;
  padding: 8px 28px;
}

.demo-hub-page .demo-site--northline .nl .nl-cart__items > p {
  padding: 24px 0;
  color: var(--nl-muted);
}

.demo-hub-page .demo-site--northline .nl .nl-cart__items article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--nl-line);
}

.demo-hub-page .demo-site--northline .nl .nl-cart__items article div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--northline .nl .nl-cart__items article span {
  color: var(--nl-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--northline .nl .nl-cart__items article b {
  font-weight: 400;
}

.demo-hub-page .demo-site--northline .nl .nl-cart__items article button {
  grid-column: 1/-1;
  justify-self: start;
  padding: 0;
  min-height: 0 !important;
  border: 0;
  background: none;
  color: var(--nl-olive);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > footer {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--nl-line);
}

.demo-hub-page .demo-site--northline .nl .nl-cart > footer > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > footer strong {
  font-weight: 400;
  font-size: 1.5rem;
}

.demo-hub-page .demo-site--northline .nl .nl-cart > footer p {
  color: var(--nl-muted);
  font-size: 0.85rem;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--northline .nl .nl-header nav {
    display: none;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hero {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-top: 12px;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hero__img {
    position: static;
    width: auto;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--a,
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--b,
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--c,
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--d,
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--e,
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--f {
    aspect-ratio: 4/3;
    width: auto;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--d,
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--f {
    display: none;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hero__copy {
    order: -1;
    grid-column: 1/-1;
    padding: 28px 0 24px;
  }
  .demo-hub-page .demo-site--northline .nl .nl-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--northline .nl .nl-about,
  .demo-hub-page .demo-site--northline .nl .nl-custom,
  .demo-hub-page .demo-site--northline .nl .nl-local {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northline .nl .nl-about__imgs {
    min-height: 480px;
  }
  .demo-hub-page .demo-site--northline .nl .nl-process__stage {
    min-height: 0;
    gap: 16px;
  }
  .demo-hub-page .demo-site--northline .nl .nl-process__photo {
    width: 100%;
    aspect-ratio: 4/3;
  }
  .demo-hub-page .demo-site--northline .nl .nl-card {
    position: static;
    width: auto !important;
  }
  .demo-hub-page .demo-site--northline .nl .nl-insta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--northline .nl .nl-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--e,
  .demo-hub-page .demo-site--northline .nl .nl-hero__img--c {
    display: none;
  }
  .demo-hub-page .demo-site--northline .nl .nl-tools a {
    display: none;
  }
  .demo-hub-page .demo-site--northline .nl .nl-products {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northline .nl .nl-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northline .nl .nl-about__imgs {
    min-height: 380px;
  }
  .demo-hub-page .demo-site--northline .nl .nl-lookbook figure {
    aspect-ratio: 1/1;
  }
  .demo-hub-page .demo-site--northline .nl .nl-lookbook figure img {
    -o-object-position: 50% 50%;
       object-position: 50% 50%;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hot--one {
    left: 28%;
    top: 55%;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hot--two {
    left: 63%;
    top: 49%;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hot--three {
    left: 54%;
    top: 70%;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hot--four {
    left: 83%;
    top: 62%;
  }
  .demo-hub-page .demo-site--northline .nl .nl-hot__card {
    width: 190px;
  }
  .demo-hub-page .demo-site--northline .nl .nl-local dl > div,
  .demo-hub-page .demo-site--northline .nl .nl-about__copy li {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northline .nl .nl-insta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}
/* ============================================================
   Sunday Crumb (bakery) demo - redesigned layout.
   Fusion of two references: warm cream + deep navy editorial mood with overlapping
   photos, and a bright orange accent with clean grid/menu structure.
   Scoped to .demo-site--sundaycrumb so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--sundaycrumb {
  --sc-cream: #fdf6e8;
  --sc-paper: #fffaf0;
  --sc-ink: #1d2433;
  --sc-navy: #0c2452;
  --sc-orange: #db6437;
  --sc-muted: #6c6f78;
  --sc-line: rgba(12, 36, 82, 0.16);
  --sc-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --sc-mono: Inter, Arial, sans-serif;
  --sc-gutter: max(20px, calc((100% - 1200px) / 2));
  background: var(--sc-cream) !important;
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundaycrumb .sc {
  position: relative;
  background: var(--sc-cream);
  color: var(--sc-ink);
  font-family: var(--sc-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--sundaycrumb .sc * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--sundaycrumb .sc [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--sundaycrumb .sc img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--sundaycrumb .sc figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--sundaycrumb .sc p {
  margin: 0;
}

.demo-hub-page .demo-site--sundaycrumb .sc a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--sundaycrumb .sc article,
.demo-hub-page .demo-site--sundaycrumb .sc form {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--sundaycrumb .sc ul,
.demo-hub-page .demo-site--sundaycrumb .sc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--sundaycrumb .sc h2,
.demo-hub-page .demo-site--sundaycrumb .sc h3,
.demo-hub-page .demo-site--sundaycrumb .sc h4 {
  margin: 0;
  max-width: none;
  text-transform: none !important;
  font-family: var(--sc-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  color: inherit;
}

.demo-hub-page .demo-site--sundaycrumb .sc h3 {
  font-size: clamp(2.2rem, 4.6vw, 4rem) !important;
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--sc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* buttons + links */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.8rem;
  border: 1px solid var(--sc-navy);
  border-radius: 0 !important;
  background: transparent;
  color: var(--sc-navy);
  font-family: var(--sc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-btn--navy {
  background: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-btn--navy:hover {
  background: var(--sc-orange);
  border-color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-btn--line:hover {
  background: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-btn--cream {
  background: var(--sc-cream);
  border-color: var(--sc-cream);
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-btn--cream:hover {
  background: var(--sc-orange);
  border-color: var(--sc-orange);
  color: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-btn--small {
  min-height: 42px;
  padding: 0 1.3rem;
  font-size: 0.68rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-btn--small:hover {
  background: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-link {
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-family: var(--sc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-link:hover {
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-sec {
  padding: clamp(64px, 8vw, 120px) var(--sc-gutter);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-head {
  display: grid;
  gap: 1rem;
  justify-items: center;
  max-width: 44rem;
  margin: 0 auto clamp(32px, 5vw, 60px);
  text-align: center;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-head > p:not(.sc-eyebrow) {
  color: var(--sc-muted);
}

/* header */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 18px var(--sc-gutter);
  border-bottom: 1px solid var(--sc-line);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-brand {
  display: grid;
  line-height: 1;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-brand b {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-brand small {
  margin-top: 5px;
  font-family: var(--sc-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-header nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.8vw, 38px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-header nav a {
  font-family: var(--sc-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-header nav a:hover {
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-header__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-call i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sc-navy);
  color: var(--sc-cream);
  font-style: normal;
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-call em {
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-call em b {
  font-weight: 400;
  color: var(--sc-navy);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-bag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 42px;
  padding: 0 1.1rem;
  border: 1px solid var(--sc-navy);
  border-radius: 0 !important;
  background: transparent;
  color: var(--sc-navy);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-bag:hover {
  background: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-bag span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--sc-orange);
  color: #fff;
  font-family: var(--sc-mono);
  font-size: 0.66rem;
}

/* hero */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero {
  position: relative;
  display: grid;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(40px, 6vw, 88px) var(--sc-gutter) clamp(48px, 6vw, 80px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero h2 {
  position: relative;
  z-index: 2;
  display: grid;
  font-size: clamp(3.2rem, 8.6vw, 8rem) !important;
  letter-spacing: -0.06em !important;
  line-height: 0.92 !important;
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero h2 span {
  display: block;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero h2 span:last-child {
  text-align: right;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero h2 em {
  font-style: normal;
  color: var(--sc-orange);
  white-space: nowrap;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-stamp {
  position: absolute;
  z-index: 1;
  top: clamp(36px, 5vw, 76px);
  right: calc(var(--sc-gutter) + 2%);
  display: grid;
  place-items: center;
  width: clamp(110px, 12vw, 160px);
  aspect-ratio: 1;
  border: 1px solid rgba(12, 36, 82, 0.28);
  border-radius: 50%;
  text-align: center;
  font-family: var(--sc-mono);
  font-size: 0.58rem;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(12, 36, 82, 0.55);
  rotate: 12deg;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero__bakes {
  position: relative;
  height: clamp(180px, 25vw, 340px);
  margin-top: 0;
  pointer-events: none;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-bake {
  position: absolute;
  border-radius: 0 !important;
  box-shadow: 0 24px 50px rgba(12, 36, 82, 0.2);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-bake--a {
  left: 30%;
  top: 0;
  width: clamp(130px, 20vw, 270px);
  aspect-ratio: 1;
  rotate: -7deg;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-bake--b {
  left: 48%;
  top: 14%;
  width: clamp(120px, 17vw, 230px);
  aspect-ratio: 1;
  rotate: 6deg;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-bake--c {
  left: 64%;
  top: 2%;
  width: clamp(100px, 14vw, 190px);
  aspect-ratio: 1;
  rotate: -3deg;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero__copy {
  display: grid;
  gap: 1.5rem;
  max-width: 30rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-hero__copy > p {
  color: var(--sc-muted);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-feature {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  justify-self: end;
  width: min(100%, 520px);
  background: var(--sc-navy);
  color: var(--sc-cream);
  transition: transform 0.3s ease;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-feature:hover {
  transform: translateY(-4px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-feature figure {
  min-height: 150px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-feature > div {
  display: grid;
  gap: 0.5rem;
  align-content: center;
  padding: 18px 22px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-feature h4 {
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-feature p {
  color: rgba(253, 246, 232, 0.75);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-feature span {
  font-family: var(--sc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-scroll {
  position: absolute;
  right: var(--sc-gutter);
  bottom: -34px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background: var(--sc-navy);
  color: var(--sc-cream);
  font-size: 1.5rem;
  transition: background-color 0.2s ease;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-scroll:hover {
  background: var(--sc-orange);
}

/* ticker */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 18px var(--sc-gutter);
  background: var(--sc-navy);
  color: var(--sc-cream);
  font-family: var(--sc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-ticker i {
  color: var(--sc-orange);
  font-style: normal;
}

/* story */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  background: #fff;
  padding-top: clamp(96px, 10vw, 150px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-story__head {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-story__head h3 {
  max-width: 12ch;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-story__copy {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-lead {
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-story__copy > p:not(.sc-lead):not(.sc-sign) {
  color: var(--sc-muted);
  max-width: 34rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-sign {
  font-size: 2rem;
  letter-spacing: -0.04em;
  color: var(--sc-navy);
  font-style: italic;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-collage {
  grid-column: 1/-1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(16px, 3vw, 40px);
  min-height: clamp(420px, 48vw, 640px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__a {
  grid-column: 1/span 4;
  grid-row: 1;
  align-self: start;
  aspect-ratio: 4/4.6;
  z-index: 2;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__b {
  grid-column: 3/span 5;
  grid-row: 1;
  align-self: end;
  aspect-ratio: 4/5;
  margin-top: 18%;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__c {
  grid-column: 9/span 4;
  grid-row: 1;
  align-self: start;
  aspect-ratio: 3/2.6;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__cta {
  grid-column: 9/span 4;
  grid-row: 1;
  align-self: end;
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  padding: clamp(18px, 2.4vw, 32px) 0 0 0;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__cta h4 {
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__cta p {
  color: var(--sc-muted);
  font-size: 0.95rem;
}

/* values */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--sc-line);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-values article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-values i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sc-orange);
  border-radius: 50%;
  color: var(--sc-orange);
  font-style: normal;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-values p {
  margin-top: 4px;
  color: var(--sc-muted);
  font-size: 0.9rem;
}

/* menu categories */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 36px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cats article {
  display: grid;
  gap: 12px;
  align-content: start;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cats figure {
  aspect-ratio: 4/4.4;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cats img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cats article:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cats h4 {
  margin-top: 8px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cats p {
  color: var(--sc-muted);
  font-size: 0.95rem;
  max-width: 24rem;
}

/* shop */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-shop {
  background: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-shop__head > div:first-child {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-filters button {
  min-height: 42px;
  padding: 0 1.2rem;
  border: 1px solid var(--sc-line);
  border-radius: 0 !important;
  background: transparent;
  color: var(--sc-navy);
  font-family: var(--sc-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-filters button:hover {
  border-color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-filters button.is-active {
  background: var(--sc-navy);
  border-color: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 30px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-product {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-product figure {
  position: relative;
  aspect-ratio: 1/1;
  margin-bottom: 8px;
  background: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-product img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-product:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-tag {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: 7px 14px;
  background: var(--sc-orange);
  color: #fff;
  font-family: var(--sc-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-price {
  font-weight: 400;
  font-family: var(--sc-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-product p {
  color: var(--sc-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-product .sc-btn {
  margin-top: 6px;
  justify-self: start;
}

/* price lists */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding-top: clamp(48px, 6vw, 90px);
  padding-bottom: clamp(48px, 6vw, 90px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list {
  padding: clamp(28px, 4vw, 56px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list--navy {
  background: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list--navy h4 {
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list--paper {
  background: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list h4 {
  margin-bottom: 1rem;
  font-size: 2rem !important;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px dotted currentColor;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list li span {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list li b {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list li em {
  font-style: normal;
  font-size: 0.85rem;
  opacity: 0.7;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list li i {
  font-style: normal;
  font-size: 1.15rem;
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-list--navy li i {
  color: #f3a06f;
}

/* banner */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-banner {
  position: relative;
  min-height: clamp(420px, 44vw, 600px);
  display: grid;
  align-items: center;
  padding: clamp(40px, 6vw, 90px) var(--sc-gutter);
  color: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-banner figure {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-banner figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.89) 0%, rgba(12, 36, 82, 0.35) 70%);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-banner__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: 34rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-banner__copy .sc-eyebrow {
  color: #f3a06f;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-banner__copy h3 {
  color: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-quote {
  position: absolute;
  z-index: 3;
  right: var(--sc-gutter);
  bottom: -56px;
  display: grid;
  gap: 14px;
  width: min(100%, 440px);
  margin: 0;
  padding: clamp(24px, 3vw, 40px);
  background: var(--sc-orange);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-quote span {
  font-size: 3.4rem;
  line-height: 0.5;
  opacity: 0.5;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-quote footer {
  font-family: var(--sc-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* cakes + form */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
  padding-top: clamp(110px, 11vw, 170px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes__visual {
  position: relative;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes__visual figure {
  aspect-ratio: 4/5;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes__note {
  position: absolute;
  left: clamp(-24px, -2vw, -10px);
  bottom: 28px;
  display: grid;
  gap: 6px;
  max-width: 280px;
  padding: 22px 26px;
  background: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes__note h4 {
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes__note p {
  color: rgba(253, 246, 232, 0.75);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form__head {
  grid-column: 1/-1;
  display: grid;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form__head p:not(.sc-eyebrow) {
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form label {
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form .is-wide {
  grid-column: 1/-1;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form input,
.demo-hub-page .demo-site--sundaycrumb .sc .sc-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(12, 36, 82, 0.3);
  border-radius: 0 !important;
  background: transparent;
  color: var(--sc-ink);
  font-size: 1rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form textarea {
  resize: vertical;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form input:focus,
.demo-hub-page .demo-site--sundaycrumb .sc .sc-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-form__foot small {
  color: var(--sc-muted);
}

/* steps */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-steps {
  background: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 36px);
  counter-reset: none;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-steps li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(24px, 3vw, 40px);
  background: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-steps li span {
  font-family: var(--sc-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-steps li p {
  color: var(--sc-muted);
  font-size: 0.95rem;
}

/* details + review */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-details__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-details__copy > p:not(.sc-eyebrow) {
  max-width: 32rem;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-review {
  display: grid;
  gap: 1.2rem;
  padding: clamp(28px, 4vw, 52px);
  background: #fff;
  border: 1px solid var(--sc-line);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-stars {
  color: var(--sc-orange);
  letter-spacing: 0.2em;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-review blockquote {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-style: italic;
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-review div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-review div b {
  font-weight: 400;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-review div span {
  color: var(--sc-muted);
  font-size: 0.88rem;
}

/* newsletter */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-news {
  padding: clamp(56px, 7vw, 100px) var(--sc-gutter);
  background: var(--sc-orange);
  color: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news__inner {
  display: grid;
  gap: 1.3rem;
  justify-items: center;
  text-align: center;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news__inner .sc-eyebrow {
  color: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news h3 {
  max-width: 16ch;
  color: #fff;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news__form {
  display: flex;
  width: min(100%, 560px);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news__form input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 0 !important;
  background: #fff;
  color: var(--sc-ink);
  font-size: 1rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news__form input:focus {
  outline: 0;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news__form .sc-btn {
  min-height: 56px;
  background: var(--sc-navy);
  border-color: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news__form .sc-btn:hover {
  background: var(--sc-cream);
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-news small {
  opacity: 0.9;
}

/* footer */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer {
  padding: clamp(56px, 7vw, 90px) var(--sc-gutter) 28px;
  background: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  text-align: center;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  justify-items: center;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer h4 {
  margin-bottom: 0.4rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer p {
  color: var(--sc-muted);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__brand b {
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--sc-navy);
  line-height: 1;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__brand small {
  font-family: var(--sc-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-orange);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 0.4rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sc-line);
  border-radius: 50%;
  font-family: var(--sc-mono);
  font-size: 0.68rem;
  color: var(--sc-navy);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__social a:hover {
  background: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--sc-line);
  font-size: 0.85rem;
}

/* cart */
.demo-hub-page .demo-site--sundaycrumb .sc .sc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(12, 36, 82, 0.5);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: var(--sc-paper);
  color: var(--sc-ink);
  box-shadow: -20px 0 60px rgba(12, 36, 82, 0.25);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > header,
.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > footer {
  padding: 24px 28px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--sc-line);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > header div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > header p {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > header span {
  color: var(--sc-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sc-navy);
  border-radius: 0 !important;
  background: transparent;
  color: var(--sc-navy);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > header button:hover {
  background: var(--sc-navy);
  color: var(--sc-cream);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart__items {
  flex: 1;
  overflow: auto;
  padding: 8px 28px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart__items > p {
  padding: 24px 0;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart__items article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sc-line);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart__items article div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart__items article span {
  color: var(--sc-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart__items article b {
  font-weight: 400;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart__items article button {
  grid-column: 1/-1;
  justify-self: start;
  padding: 0;
  min-height: 0 !important;
  border: 0;
  background: none;
  color: var(--sc-orange);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > footer {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--sc-line);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > footer > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > footer strong {
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--sc-navy);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > footer label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundaycrumb .sc .sc-cart > footer select {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--sc-line);
  border-radius: 0 !important;
  background: #fff;
  color: var(--sc-ink);
  font-size: 0.95rem;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-header nav {
    display: none;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-call {
    display: none;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-hero__foot,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-story,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-details,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-lists {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-feature {
    justify-self: start;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-hero__bakes {
    height: clamp(150px, 30vw, 240px);
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-height: 0;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__a,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__b,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__c,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__cta {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-collage__cta {
    grid-column: 1/-1;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-cats,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-steps ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-quote {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 24px 0 -56px;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-banner {
    padding-bottom: 24px;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes {
    padding-top: clamp(80px, 8vw, 120px);
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-hero h2 {
    font-size: 12.4vw !important;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-stamp {
    display: none;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-hero__bakes {
    height: 52vw;
    margin-top: -10px;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-bake--a {
    left: 4%;
    width: 36vw;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-bake--b {
    left: 36%;
    top: 12%;
    width: 32vw;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-bake--c {
    left: 66%;
    top: 0;
    width: 28vw;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-feature {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-feature figure {
    min-height: 180px;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-scroll {
    display: none;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-values,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-products,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-form,
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-collage {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-cakes__note {
    position: static;
    max-width: none;
  }
  .demo-hub-page .demo-site--sundaycrumb .sc .sc-news__form {
    flex-direction: column;
  }}
/* ============================================================
   Fieldwork Flowers (florist) demo - redesigned layout (blush, wine and sage).
   Scoped to .demo-site--fieldwork so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--fieldwork {
  --fw-bg: #ffffff;
  --fw-blush: #ffebf2;
  --fw-wine: #5c2a35;
  --fw-sage: #96a271;
  --fw-sage-dark: #7d8a5a;
  --fw-ink: #424242;
  --fw-gold: #fec42d;
  --fw-line: rgba(92, 42, 53, 0.16);
  --fw-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --fw-mono: Inter, Arial, sans-serif;
  --fw-gutter: clamp(16px, 2vw, 28px);
  background: var(--fw-bg) !important;
  color: var(--fw-ink);
}

.demo-hub-page .demo-site--fieldwork .fw {
  position: relative;
  background: var(--fw-bg);
  color: var(--fw-ink);
  font-family: var(--fw-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--fieldwork .fw * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--fieldwork .fw [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--fieldwork .fw img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--fieldwork .fw figure {
  margin: 0;
  overflow: hidden;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--fieldwork .fw p {
  margin: 0;
}

.demo-hub-page .demo-site--fieldwork .fw a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--fieldwork .fw article,
.demo-hub-page .demo-site--fieldwork .fw form {
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--fieldwork .fw ul,
.demo-hub-page .demo-site--fieldwork .fw dl,
.demo-hub-page .demo-site--fieldwork .fw dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--fieldwork .fw h2,
.demo-hub-page .demo-site--fieldwork .fw h3,
.demo-hub-page .demo-site--fieldwork .fw h4 {
  margin: 0;
  max-width: none;
  text-transform: uppercase !important;
  font-family: var(--fw-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  line-height: 0.98 !important;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw h3 {
  font-size: clamp(2.2rem, 4.6vw, 4.2rem) !important;
}

.demo-hub-page .demo-site--fieldwork .fw h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.015em !important;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--fw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-eyebrow--light {
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-text {
  color: var(--fw-ink);
  max-width: 36rem;
}

/* pill buttons */
.demo-hub-page .demo-site--fieldwork .fw .fw-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-family: var(--fw-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-pill--sage {
  background: var(--fw-sage);
  border-color: var(--fw-sage);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-pill--sage:hover {
  background: var(--fw-wine);
  border-color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-pill--cream {
  background: var(--fw-blush);
  border-color: var(--fw-blush);
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-pill--cream:hover {
  background: var(--fw-sage);
  border-color: var(--fw-sage);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-pill--small {
  min-height: 40px;
  padding: 0 1.2rem;
  font-size: 0.66rem;
  background: transparent;
  border-color: var(--fw-wine);
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-pill--small:hover {
  background: var(--fw-wine);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-sec {
  padding: clamp(60px, 8vw, 120px) var(--fw-gutter);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-head {
  display: grid;
  gap: 1rem;
  justify-items: center;
  max-width: 46rem;
  margin: 0 auto clamp(28px, 4vw, 56px);
  text-align: center;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
  margin: 0 0 clamp(24px, 4vw, 48px);
  text-align: left;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-head--row > div {
  display: grid;
  gap: 1rem;
}

/* header */
.demo-hub-page .demo-site--fieldwork .fw .fw-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px var(--fw-gutter);
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-brand i {
  display: block;
  width: 14px;
  height: 22px;
  border: 2px solid var(--fw-wine);
  border-radius: 50% 50% 50% 50%/55% 55% 45% 45%;
  position: relative;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-brand i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 8px;
  background: var(--fw-sage);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-brand b {
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-brand small {
  font-family: var(--fw-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  align-self: flex-end;
  margin-bottom: 4px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-brand--light i {
  border-color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-header nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-header nav a {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-header nav a:hover {
  color: var(--fw-sage-dark);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-bag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--fw-wine);
  border-radius: 999px !important;
  background: transparent;
  color: var(--fw-wine);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-bag:hover {
  background: var(--fw-wine);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-bag span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--fw-sage);
  color: #fff;
  font-family: var(--fw-mono);
  font-size: 0.66rem;
}

/* hero */
.demo-hub-page .demo-site--fieldwork .fw .fw-hero {
  padding: clamp(32px, 5vw, 72px) var(--fw-gutter) clamp(40px, 6vw, 80px);
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(24px, 4vw, 52px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__left {
  display: grid;
  gap: 1.2rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  font-family: var(--fw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-tags li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fw-sage);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero h2 {
  font-size: clamp(2.6rem, 6.4vw, 6rem) !important;
  max-width: 14ch;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__right {
  display: grid;
  gap: 1.2rem;
  justify-items: end;
  text-align: right;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__right > p {
  max-width: 26rem;
  font-size: 1.02rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__right small {
  color: var(--fw-wine);
  opacity: 0.75;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-play {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--fw-wine);
  font-size: 0.8rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-play:hover {
  background: var(--fw-wine);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__stage {
  position: relative;
  padding-top: clamp(30px, 6vw, 90px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__img {
  position: relative;
  aspect-ratio: 16/6.2;
  min-height: 280px;
  border-radius: 18px !important;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__img img {
  -o-object-position: center 45%;
     object-position: center 45%;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-hero__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(92, 42, 53, 0.35), rgba(92, 42, 53, 0.05));
}

.demo-hub-page .demo-site--fieldwork .fw .fw-bloom {
  position: absolute;
  border: 6px solid var(--fw-blush);
  border-radius: 50% !important;
  box-shadow: 0 16px 36px rgba(92, 42, 53, 0.22);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-bloom--a {
  left: 7%;
  top: 0;
  width: clamp(90px, 13vw, 190px);
  aspect-ratio: 1;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-bloom--b {
  left: 45%;
  top: -2%;
  width: clamp(110px, 16vw, 230px);
  aspect-ratio: 1;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-bloom--c {
  right: 8%;
  top: 4%;
  width: clamp(90px, 12vw, 170px);
  aspect-ratio: 1;
}

/* about */
.demo-hub-page .demo-site--fieldwork .fw .fw-about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-about__main {
  min-height: 480px;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-about__copy {
  position: relative;
  display: grid;
  gap: 1.2rem;
  align-content: end;
  justify-items: start;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-about__small {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(130px, 17vw, 220px);
  aspect-ratio: 0.75;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-about__copy h3 {
  max-width: 14ch;
  margin-top: clamp(150px, 16vw, 220px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-top: 0.8rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-stats > div {
  padding: 22px 16px;
  border-radius: 14px;
  background: var(--fw-blush);
  text-align: center;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-stats dt {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-stats dd {
  margin-top: 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fw-wine);
}

/* why (wine panel) */
.demo-hub-page .demo-site--fieldwork .fw .fw-why {
  position: relative;
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  margin: 0 var(--fw-gutter);
  padding: clamp(44px, 6vw, 88px) clamp(20px, 4vw, 64px);
  border-radius: 18px;
  background: radial-gradient(ellipse 70% 90% at 30% 20%, rgba(166, 58, 98, 0.55), rgba(166, 58, 98, 0) 60%), var(--fw-wine);
  text-align: center;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-why h3 {
  max-width: 16ch;
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 36px);
  width: 100%;
  margin-top: clamp(20px, 3vw, 44px);
  text-align: left;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-why article {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-why i {
  font-style: normal;
  font-size: 1.4rem;
  color: var(--fw-sage);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-why h4 {
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-why p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}

/* occasions */
.demo-hub-page .demo-site--fieldwork .fw .fw-occasions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-occ {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 14px 26px;
  border-radius: 16px;
  background: var(--fw-blush);
  transition: transform 0.3s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-occ:hover {
  transform: translateY(-4px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-occ figure {
  aspect-ratio: 4/3.2;
  border-radius: 12px !important;
  margin-bottom: 8px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-occ img {
  transition: transform 0.7s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-occ:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-arrow {
  position: absolute;
  top: 26px;
  right: 26px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fw-sage);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-occ h4,
.demo-hub-page .demo-site--fieldwork .fw .fw-occ p {
  padding: 0 8px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-occ p {
  color: var(--fw-ink);
  font-size: 0.95rem;
}

/* shop */
.demo-hub-page .demo-site--fieldwork .fw .fw-shop {
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-shop__head > div:first-child {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-filters button {
  min-height: 42px;
  padding: 0 1.3rem;
  border: 1px solid var(--fw-line);
  border-radius: 999px !important;
  background: #fff;
  color: var(--fw-wine);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-filters button:hover {
  border-color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-filters button.is-active {
  background: var(--fw-wine);
  border-color: var(--fw-wine);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px) clamp(14px, 1.8vw, 24px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-product {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px 14px 22px;
  background: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-product figure {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 12px !important;
  margin-bottom: 8px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-product img {
  transition: transform 0.7s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-product:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-tag {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--fw-sage);
  color: #fff;
  font-family: var(--fw-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-product__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-product__row b {
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-product > p {
  padding: 0 6px;
  color: var(--fw-ink);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-product .fw-pill {
  margin: 8px 6px 0;
  justify-self: start;
}

/* banner */
.demo-hub-page .demo-site--fieldwork .fw .fw-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  min-height: clamp(380px, 38vw, 520px);
  padding: clamp(36px, 5vw, 72px) var(--fw-gutter);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-banner figure {
  position: absolute;
  inset: 0;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-banner figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(40, 14, 22, 0.78) 0%, rgba(40, 14, 22, 0.3) 100%);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-banner > div {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.2rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-banner h3 {
  max-width: 16ch;
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-banner__side {
  justify-items: end;
  text-align: right;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-banner__side p {
  max-width: 24rem;
}

/* plans */
.demo-hub-page .demo-site--fieldwork .fw .fw-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-plan {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(24px, 3vw, 40px);
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-plan--wine {
  background: var(--fw-wine);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-plan--wine h4,
.demo-hub-page .demo-site--fieldwork .fw .fw-plan--wine .fw-price b {
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-price b {
  font-weight: 400;
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-price span {
  font-size: 0.9rem;
  opacity: 0.75;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-plan ul {
  display: grid;
  gap: 10px;
  padding: 1rem 0;
  border-top: 1px solid var(--fw-line);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-plan--wine ul {
  border-top-color: rgba(255, 255, 255, 0.25);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-plan li {
  display: flex;
  gap: 10px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-plan li::before {
  content: "✿";
  color: var(--fw-sage);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-plan .fw-pill {
  justify-self: start;
}

/* events + form */
.demo-hub-page .demo-site--fieldwork .fw .fw-events {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-events__visual {
  position: relative;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-events__visual figure {
  aspect-ratio: 4/5;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-events__note {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  padding: 22px;
  border-radius: 14px;
  background: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-events__note h3 {
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form__head {
  grid-column: 1/-1;
  display: grid;
  gap: 0.9rem;
  margin-bottom: 0.4rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form__head p:not(.fw-eyebrow) {
  color: var(--fw-ink);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form label,
.demo-hub-page .demo-site--fieldwork .fw .fw-zip label {
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form .is-wide {
  grid-column: 1/-1;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form input,
.demo-hub-page .demo-site--fieldwork .fw .fw-form textarea,
.demo-hub-page .demo-site--fieldwork .fw .fw-zip input {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 12px !important;
  background: #fff;
  color: var(--fw-ink);
  font-size: 0.98rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form textarea {
  resize: vertical;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form input:focus,
.demo-hub-page .demo-site--fieldwork .fw .fw-form textarea:focus,
.demo-hub-page .demo-site--fieldwork .fw .fw-zip input:focus {
  outline: 0;
  border-color: var(--fw-sage);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-form__foot small {
  color: var(--fw-wine);
}

/* delivery */
.demo-hub-page .demo-site--fieldwork .fw .fw-delivery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-delivery__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-zip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  width: 100%;
  max-width: 32rem;
  padding: 18px;
  border-radius: 16px;
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-zip p {
  grid-column: 1/-1;
  color: var(--fw-wine);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-delivery__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-delivery__cards article {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 22px;
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-delivery__cards strong {
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--fw-wine);
  text-transform: uppercase;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-delivery__cards p {
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-delivery__cards figure {
  aspect-ratio: 1/1;
}

/* testimonials */
.demo-hub-page .demo-site--fieldwork .fw .fw-voices {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-voices__img {
  min-height: 420px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-voices__copy {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-voices__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-voices__cards article {
  display: grid;
  gap: 14px;
  align-content: space-between;
  padding: 24px;
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-stars {
  color: var(--fw-gold);
  letter-spacing: 0.2em;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-voices__cards article > p:not(.fw-stars) {
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-voices__cards article div {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--fw-line);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-voices__cards article b {
  font-weight: 400;
  text-transform: uppercase;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-voices__cards article span {
  font-family: var(--fw-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* faq */
.demo-hub-page .demo-site--fieldwork .fw .fw-faq__items {
  display: grid;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-faq__items article {
  background: var(--fw-blush);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-faq__items article.is-open {
  background: var(--fw-wine);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-faq__items button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 0 !important;
  padding: 20px 24px !important;
  border: 0;
  border-radius: 16px !important;
  background: none;
  color: var(--fw-wine);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-faq__items article.is-open button {
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-faq__items button span {
  flex: none;
  font-family: var(--fw-mono);
  font-size: 1.3rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-faq__items article p {
  display: none;
  padding: 0 24px 22px;
  max-width: 46rem;
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-faq__items article.is-open p {
  display: block;
  color: rgba(255, 255, 255, 0.85);
}

/* mosaic */
.demo-hub-page .demo-site--fieldwork .fw .fw-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  padding: 0 var(--fw-gutter) clamp(60px, 8vw, 110px);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-mosaic figure {
  aspect-ratio: 4/3.2;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-mosaic img {
  transition: transform 0.7s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-mosaic figure:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-mosaic__card {
  display: grid;
  gap: 1rem;
  align-content: center;
  justify-items: center;
  padding: 24px;
  border-radius: 14px;
  background: var(--fw-wine);
  color: #fff;
  text-align: center;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-mosaic__card h4 {
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-mosaic__card p {
  max-width: 20rem;
  font-size: 0.92rem;
  opacity: 0.9;
}

/* footer */
.demo-hub-page .demo-site--fieldwork .fw .fw-footer {
  padding: clamp(48px, 6vw, 88px) var(--fw-gutter) 24px;
  background: var(--fw-wine);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__social {
  display: flex;
  gap: 10px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__social a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--fw-sage);
  color: #fff;
  font-family: var(--fw-mono);
  font-size: 0.7rem;
  transition: background-color 0.2s ease;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__social a:hover {
  background: #fff;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__cols {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr 1.6fr;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(32px, 4vw, 56px) 0;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__cols > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer h4 {
  margin-bottom: 0.6rem;
  color: #fff;
  font-size: 1.5rem !important;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer a:not(.fw-brand):not(.fw-pill),
.demo-hub-page .demo-site--fieldwork .fw .fw-footer p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer a:not(.fw-brand):not(.fw-pill):hover {
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__news form {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__news input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px !important;
  background: var(--fw-blush);
  color: var(--fw-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__news input:focus {
  outline: 0;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__news small {
  opacity: 0.85;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-footer__legal {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.85rem !important;
}

/* cart */
.demo-hub-page .demo-site--fieldwork .fw .fw-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(60, 24, 32, 0.5);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: #fff;
  color: var(--fw-ink);
  box-shadow: -20px 0 60px rgba(60, 24, 32, 0.25);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > header,
.demo-hub-page .demo-site--fieldwork .fw .fw-cart > footer {
  padding: 24px 28px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--fw-line);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > header div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > header p {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--fw-wine);
  text-transform: uppercase;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > header span {
  color: var(--fw-ink);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--fw-wine);
  border-radius: 50% !important;
  background: transparent;
  color: var(--fw-wine);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > header button:hover {
  background: var(--fw-wine);
  color: #fff;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart__items {
  flex: 1;
  overflow: auto;
  padding: 8px 28px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart__items > p {
  padding: 24px 0;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart__items article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--fw-line);
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart__items article div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart__items article span {
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart__items article b {
  font-weight: 400;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart__items article button {
  grid-column: 1/-1;
  justify-self: start;
  padding: 0;
  min-height: 0 !important;
  border: 0;
  background: none;
  color: var(--fw-sage-dark);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > footer {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--fw-line);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > footer > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > footer strong {
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > footer label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--fw-wine);
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > footer input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--fw-line);
  border-radius: 12px !important;
  background: #fff;
  color: var(--fw-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--fieldwork .fw .fw-cart > footer p {
  font-size: 0.85rem;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--fieldwork .fw .fw-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-header nav {
    display: none;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-hero__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-hero__right {
    justify-items: start;
    text-align: left;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-about,
  .demo-hub-page .demo-site--fieldwork .fw .fw-events,
  .demo-hub-page .demo-site--fieldwork .fw .fw-delivery,
  .demo-hub-page .demo-site--fieldwork .fw .fw-voices {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-about__main {
    min-height: 360px;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-about__copy h3 {
    margin-top: 0;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-about__small {
    display: none;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-occasions,
  .demo-hub-page .demo-site--fieldwork .fw .fw-plans__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-banner {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-banner__side {
    justify-items: start;
    text-align: left;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-voices__img {
    min-height: 280px;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--fieldwork .fw .fw-header__right .fw-pill {
    display: none;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-bloom {
    display: none;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-hero__stage {
    padding-top: 0;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-hero__img {
    aspect-ratio: 4/3.4;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-stats,
  .demo-hub-page .demo-site--fieldwork .fw .fw-why__grid,
  .demo-hub-page .demo-site--fieldwork .fw .fw-products,
  .demo-hub-page .demo-site--fieldwork .fw .fw-form,
  .demo-hub-page .demo-site--fieldwork .fw .fw-voices__cards,
  .demo-hub-page .demo-site--fieldwork .fw .fw-delivery__cards,
  .demo-hub-page .demo-site--fieldwork .fw .fw-mosaic,
  .demo-hub-page .demo-site--fieldwork .fw .fw-footer__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-zip {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-head--row {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--fieldwork .fw .fw-footer__top {
    flex-direction: column;
    align-items: flex-start;
  }}
/* ============================================================
   Juniper & Main (boutique) demo - redesigned layout (handmade boutique).
   Scoped to .demo-site--junipermain so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--junipermain {
  --jm-bg: #ffffff;
  --jm-cream: #f4f3f1;
  --jm-ink: #574e4a;
  --jm-muted: #736b65;
  --jm-orange: #dd501b;
  --jm-line: #e3e0dc;
  --jm-gray: #f1f1f1;
  --jm-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --jm-mono: Inter, Arial, sans-serif;
  --jm-gutter: max(20px, calc((100% - 1300px) / 2));
  background: var(--jm-bg) !important;
  color: var(--jm-ink);
}

.demo-hub-page .demo-site--junipermain .jm {
  position: relative;
  background: var(--jm-bg);
  color: var(--jm-ink);
  font-family: var(--jm-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--junipermain .jm * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--junipermain .jm [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--junipermain .jm img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--junipermain .jm figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--junipermain .jm p {
  margin: 0;
}

.demo-hub-page .demo-site--junipermain .jm a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--junipermain .jm article,
.demo-hub-page .demo-site--junipermain .jm form {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--junipermain .jm ul,
.demo-hub-page .demo-site--junipermain .jm dl,
.demo-hub-page .demo-site--junipermain .jm dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--junipermain .jm h2,
.demo-hub-page .demo-site--junipermain .jm h3,
.demo-hub-page .demo-site--junipermain .jm h4 {
  margin: 0;
  max-width: none;
  text-transform: none !important;
  font-family: var(--jm-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
  color: var(--jm-ink);
}

.demo-hub-page .demo-site--junipermain .jm h3 {
  font-size: clamp(2.1rem, 4.2vw, 3.6rem) !important;
}

.demo-hub-page .demo-site--junipermain .jm h4 {
  font-size: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--junipermain .jm .jm-eyebrow {
  font-family: var(--jm-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-link {
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--jm-orange);
  color: var(--jm-orange);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-link:hover {
  color: var(--jm-ink);
  border-color: var(--jm-ink);
}

/* buttons */
.demo-hub-page .demo-site--junipermain .jm .jm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 2.2rem;
  border: 1px solid var(--jm-ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--jm-ink);
  font-family: var(--jm-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--junipermain .jm .jm-btn--orange {
  background: var(--jm-orange);
  border-color: var(--jm-orange);
  color: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-btn--orange:hover {
  background: var(--jm-ink);
  border-color: var(--jm-ink);
}

.demo-hub-page .demo-site--junipermain .jm .jm-btn--line:hover {
  background: var(--jm-ink);
  color: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-btn--small {
  min-height: 42px;
  padding: 0 1.4rem;
  font-size: 0.66rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-btn--small:hover {
  background: var(--jm-ink);
  color: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-center {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--junipermain .jm .jm-sec {
  padding: clamp(60px, 8vw, 120px) var(--jm-gutter);
}

.demo-hub-page .demo-site--junipermain .jm .jm-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(28px, 4vw, 52px);
}

/* promo marquee */
.demo-hub-page .demo-site--junipermain .jm .jm-promo {
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--jm-line);
}

.demo-hub-page .demo-site--junipermain .jm .jm-promo__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  gap: 34px;
  padding: 10px 0;
  font-size: 0.92rem;
  animation: jm-marquee 38s linear infinite;
}

.demo-hub-page .demo-site--junipermain .jm .jm-promo__track span {
  white-space: nowrap;
}

.demo-hub-page .demo-site--junipermain .jm .jm-promo__track i {
  font-style: normal;
  font-size: 0.5rem;
  color: var(--jm-orange);
  align-self: center;
}

/* header */
.demo-hub-page .demo-site--junipermain .jm .jm-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 22px var(--jm-gutter);
}

.demo-hub-page .demo-site--junipermain .jm .jm-header nav {
  display: flex;
  gap: clamp(14px, 2.4vw, 30px);
}

.demo-hub-page .demo-site--junipermain .jm .jm-header nav a {
  font-size: 1.02rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-header nav a:hover,
.demo-hub-page .demo-site--junipermain .jm .jm-tools a:hover {
  color: var(--jm-orange);
}

.demo-hub-page .demo-site--junipermain .jm .jm-brand {
  font-size: 2rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--jm-ink);
  font-style: italic;
}

.demo-hub-page .demo-site--junipermain .jm .jm-brand i {
  color: var(--jm-orange);
}

.demo-hub-page .demo-site--junipermain .jm .jm-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}

.demo-hub-page .demo-site--junipermain .jm .jm-tools a {
  font-size: 1.02rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-tools button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0 1.1rem;
  border: 1px solid var(--jm-ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--jm-ink);
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--junipermain .jm .jm-tools button:hover {
  background: var(--jm-ink);
  color: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-tools button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--jm-orange);
  color: #fff;
  font-family: var(--jm-mono);
  font-size: 0.66rem;
}

/* giant word */
.demo-hub-page .demo-site--junipermain .jm .jm-giant {
  margin: 0;
  padding: 0 var(--jm-gutter);
  font-size: 17vw !important;
  line-height: 0.9 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  color: var(--jm-ink);
}

/* hero */
.demo-hub-page .demo-site--junipermain .jm .jm-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(20px, 3vw, 40px) var(--jm-gutter) 0;
}

.demo-hub-page .demo-site--junipermain .jm .jm-hero__photo {
  min-height: 560px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-hero__panel {
  display: grid;
  gap: 1.2rem;
  align-content: start;
  justify-items: center;
  padding: clamp(36px, 5vw, 70px) clamp(20px, 4vw, 60px);
  background: var(--jm-cream);
  text-align: center;
}

.demo-hub-page .demo-site--junipermain .jm .jm-hero__panel h3 {
  max-width: 12ch;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem) !important;
}

.demo-hub-page .demo-site--junipermain .jm .jm-hero__sub {
  max-width: 30rem;
  color: var(--jm-muted);
  font-size: 0.98rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  width: min(100%, 300px);
  margin-top: 0.8rem;
  align-items: center;
}

.demo-hub-page .demo-site--junipermain .jm .jm-feature figure {
  grid-column: 1/-1;
  aspect-ratio: 1/1.05;
}

.demo-hub-page .demo-site--junipermain .jm .jm-feature img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--junipermain .jm .jm-feature:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--junipermain .jm .jm-feature span {
  text-align: left;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--junipermain .jm .jm-feature i {
  font-style: normal;
  color: var(--jm-orange);
  font-size: 1.2rem;
}

/* categories */
.demo-hub-page .demo-site--junipermain .jm .jm-cats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  padding-top: clamp(60px, 7vw, 100px);
  padding-bottom: clamp(40px, 5vw, 70px);
}

.demo-hub-page .demo-site--junipermain .jm .jm-cats a {
  display: grid;
  gap: 14px;
  align-content: start;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cats figure {
  aspect-ratio: 1/1.05;
  background: var(--jm-cream);
}

.demo-hub-page .demo-site--junipermain .jm .jm-cats img {
  transition: transform 0.7s ease;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cats a:hover img {
  transform: scale(1.06);
}

.demo-hub-page .demo-site--junipermain .jm .jm-cats b {
  font-weight: 400;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cats a:hover b {
  color: var(--jm-orange);
}

/* shop */
.demo-hub-page .demo-site--junipermain .jm .jm-shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 4vw, 48px);
}

.demo-hub-page .demo-site--junipermain .jm .jm-shop__head > div:first-child {
  display: grid;
  gap: 0.9rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-filters button {
  min-height: 0 !important;
  padding: 0 0 4px !important;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0 !important;
  background: none;
  color: var(--jm-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--junipermain .jm .jm-filters button:hover {
  color: var(--jm-ink);
}

.demo-hub-page .demo-site--junipermain .jm .jm-filters button.is-active {
  color: var(--jm-orange);
  border-bottom-color: var(--jm-orange);
}

.demo-hub-page .demo-site--junipermain .jm .jm-shop__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: stretch;
}

.demo-hub-page .demo-site--junipermain .jm .jm-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px);
}

.demo-hub-page .demo-site--junipermain .jm .jm-product {
  display: grid;
  gap: 8px;
  align-content: start;
}

.demo-hub-page .demo-site--junipermain .jm .jm-product figure {
  position: relative;
  aspect-ratio: 1/1.02;
  margin-bottom: 8px;
  background: var(--jm-gray);
}

.demo-hub-page .demo-site--junipermain .jm .jm-product img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--junipermain .jm .jm-product:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--junipermain .jm .jm-tag {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: var(--jm-orange);
  color: #fff;
  font-family: var(--jm-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--junipermain .jm .jm-stars {
  color: var(--jm-ink);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.demo-hub-page .demo-site--junipermain .jm .jm-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 1.15rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-price s {
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-price small {
  color: var(--jm-muted);
  font-size: 0.82rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-product .jm-btn {
  margin-top: 6px;
  justify-self: start;
}

.demo-hub-page .demo-site--junipermain .jm .jm-shop__tall {
  align-self: stretch;
  min-height: 520px;
}

/* word strips */
.demo-hub-page .demo-site--junipermain .jm .jm-words {
  display: grid;
  gap: 18px;
  overflow: hidden;
  padding: clamp(20px, 3vw, 40px) 0 clamp(60px, 7vw, 100px);
}

.demo-hub-page .demo-site--junipermain .jm .jm-words__row {
  overflow: hidden;
}

.demo-hub-page .demo-site--junipermain .jm .jm-words__track {
  display: flex;
  align-items: stretch;
  width: -moz-max-content;
  width: max-content;
  gap: 20px;
  animation: jm-marquee 46s linear infinite;
}

.demo-hub-page .demo-site--junipermain .jm .jm-words__row--rev .jm-words__track {
  animation-direction: reverse;
  animation-duration: 54s;
}

.demo-hub-page .demo-site--junipermain .jm .jm-words__track span {
  display: grid;
  place-items: center;
  padding: 0 clamp(28px, 4vw, 56px);
  border: 1px solid var(--jm-line);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.demo-hub-page .demo-site--junipermain .jm .jm-words__track figure {
  flex: none;
  width: clamp(110px, 15vw, 220px);
  aspect-ratio: 1.3/1;
}

.demo-hub-page .demo-site--junipermain .jm .jm-words__track span {
  min-height: clamp(76px, 9.2vw, 130px);
}

/* story */
.demo-hub-page .demo-site--junipermain .jm .jm-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  background: var(--jm-cream);
}

.demo-hub-page .demo-site--junipermain .jm .jm-story__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--junipermain .jm .jm-story__copy > p:not(.jm-eyebrow) {
  max-width: 30rem;
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-story__who {
  display: grid;
  gap: 2px;
  margin-top: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--jm-line);
}

.demo-hub-page .demo-site--junipermain .jm .jm-story__who b {
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--junipermain .jm .jm-story__who span {
  color: var(--jm-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-story__imgs {
  position: relative;
  min-height: 520px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-story__a {
  position: absolute;
  top: 0;
  left: 0;
  width: 56%;
  aspect-ratio: 3/4;
}

.demo-hub-page .demo-site--junipermain .jm .jm-story__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 4/4.6;
  border: 10px solid var(--jm-cream);
}

/* inquiry */
.demo-hub-page .demo-site--junipermain .jm .jm-inquiry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-hub-page .demo-site--junipermain .jm .jm-inquiry figure {
  min-height: 620px;
  background: #14110f;
}

.demo-hub-page .demo-site--junipermain .jm .jm-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 20px;
  align-content: center;
  padding: clamp(32px, 5vw, 80px);
  background: var(--jm-cream);
}

.demo-hub-page .demo-site--junipermain .jm .jm-form > p,
.demo-hub-page .demo-site--junipermain .jm .jm-form > h3 {
  grid-column: 1/-1;
}

.demo-hub-page .demo-site--junipermain .jm .jm-form h3 {
  margin-bottom: 0.6rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-form label {
  display: grid;
  gap: 8px;
  font-size: 1rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-form .is-wide {
  grid-column: 1/-1;
}

.demo-hub-page .demo-site--junipermain .jm .jm-form input[type=text],
.demo-hub-page .demo-site--junipermain .jm .jm-form input[type=email],
.demo-hub-page .demo-site--junipermain .jm .jm-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--jm-line);
  border-radius: 0 !important;
  background: #fff;
  color: var(--jm-ink);
  font-size: 0.98rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-form textarea {
  resize: vertical;
}

.demo-hub-page .demo-site--junipermain .jm .jm-form input:focus,
.demo-hub-page .demo-site--junipermain .jm .jm-form textarea:focus {
  outline: 0;
  border-color: var(--jm-ink);
}

.demo-hub-page .demo-site--junipermain .jm .jm-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem !important;
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--jm-orange);
}

.demo-hub-page .demo-site--junipermain .jm .jm-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-form__foot small {
  color: var(--jm-muted);
}

/* latest */
.demo-hub-page .demo-site--junipermain .jm .jm-latest__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}

/* store */
.demo-hub-page .demo-site--junipermain .jm .jm-store {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--junipermain .jm .jm-store__photo {
  aspect-ratio: 4/3.4;
}

.demo-hub-page .demo-site--junipermain .jm .jm-store__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--junipermain .jm .jm-store address {
  font-style: normal;
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-store dl {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--jm-line);
}

.demo-hub-page .demo-site--junipermain .jm .jm-store dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--jm-line);
}

.demo-hub-page .demo-site--junipermain .jm .jm-store dt {
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-store__note {
  color: var(--jm-muted);
  font-size: 0.92rem;
  max-width: 28rem;
}

/* faq */
.demo-hub-page .demo-site--junipermain .jm .jm-faq {
  background: var(--jm-cream);
}

.demo-hub-page .demo-site--junipermain .jm .jm-faq .jm-head {
  justify-items: center;
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.demo-hub-page .demo-site--junipermain .jm .jm-faq__items {
  display: grid;
  gap: 10px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-faq__items article {
  background: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-faq__items button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 0 !important;
  padding: 26px 30px !important;
  border: 0;
  border-radius: 0 !important;
  background: none;
  color: var(--jm-ink);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
}

.demo-hub-page .demo-site--junipermain .jm .jm-faq__items button:hover {
  color: var(--jm-orange);
}

.demo-hub-page .demo-site--junipermain .jm .jm-faq__items button span {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--jm-line);
  border-radius: 50%;
  font-family: var(--jm-mono);
  font-size: 1.1rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-faq__items article p {
  display: none;
  padding: 0 30px 28px;
  max-width: 46rem;
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-faq__items article.is-open p {
  display: block;
}

/* newsletter + insta */
.demo-hub-page .demo-site--junipermain .jm .jm-news {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  text-align: center;
}

.demo-hub-page .demo-site--junipermain .jm .jm-news > p {
  max-width: 28rem;
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-news__form {
  display: flex;
  flex-wrap: wrap;
  width: min(100%, 560px);
  border: 1px solid var(--jm-line);
}

.demo-hub-page .demo-site--junipermain .jm .jm-news__form input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 0 !important;
  background: #fff;
  color: var(--jm-ink);
  font-size: 1rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-news__form input:focus {
  outline: 0;
}

.demo-hub-page .demo-site--junipermain .jm .jm-news__form .jm-btn {
  min-height: 56px;
  border-width: 0;
}

.demo-hub-page .demo-site--junipermain .jm .jm-news small {
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-news__form small {
  flex: 0 0 100%;
  padding: 12px 20px;
  border-top: 1px solid var(--jm-line);
  background: var(--jm-cream);
  text-align: left;
}

.demo-hub-page .demo-site--junipermain .jm .jm-insta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 20px);
  width: 100%;
  margin-top: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--junipermain .jm .jm-insta figure {
  aspect-ratio: 1/1.05;
  background: var(--jm-cream);
}

.demo-hub-page .demo-site--junipermain .jm .jm-insta img {
  transition: transform 0.7s ease;
}

.demo-hub-page .demo-site--junipermain .jm .jm-insta figure:hover img {
  transform: scale(1.06);
}

/* footer */
.demo-hub-page .demo-site--junipermain .jm .jm-footer {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 720px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer__bg {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 34, 30, 0) 20%, rgba(40, 34, 30, 0.35) 55%, rgba(40, 34, 30, 0.85) 100%);
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer__panel {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 6vw, 80px) var(--jm-gutter) 28px;
  color: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer__grid > div {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer h4 {
  margin-bottom: 0.6rem;
  color: #fff;
  font-size: 1.5rem !important;
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer a:not(.jm-brand),
.demo-hub-page .demo-site--junipermain .jm .jm-footer p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer a:not(.jm-brand):hover {
  color: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-chips a {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  font-size: 0.85rem !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--junipermain .jm .jm-chips a:hover {
  background: #fff;
  color: var(--jm-ink) !important;
}

.demo-hub-page .demo-site--junipermain .jm .jm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(40px, 6vw, 90px);
  font-size: 1rem !important;
}

/* cart */
.demo-hub-page .demo-site--junipermain .jm .jm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(40, 34, 30, 0.5);
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: #fff;
  color: var(--jm-ink);
  box-shadow: -20px 0 60px rgba(40, 34, 30, 0.25);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > header,
.demo-hub-page .demo-site--junipermain .jm .jm-cart > footer {
  padding: 24px 28px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--jm-line);
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > header div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > header p {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > header span {
  color: var(--jm-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--jm-ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--jm-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > header button:hover {
  background: var(--jm-ink);
  color: #fff;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__items {
  flex: 1;
  overflow: auto;
  padding: 8px 28px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__items > p {
  padding: 24px 0;
  color: var(--jm-muted);
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__items article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--jm-line);
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__items article div {
  display: grid;
  gap: 2px;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__items article span {
  color: var(--jm-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__items article b {
  font-weight: 400;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__items article button {
  grid-column: 1/-1;
  justify-self: start;
  padding: 0;
  min-height: 0 !important;
  border: 0;
  background: none;
  color: var(--jm-orange);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > footer {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--jm-line);
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > footer > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > footer strong {
  font-weight: 400;
  font-size: 1.5rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart > footer p {
  color: var(--jm-muted);
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--junipermain .jm .jm-cart__pick input {
  width: 18px;
  height: 18px;
  accent-color: var(--jm-orange);
}@media (prefers-reduced-motion: reduce) {
  .demo-hub-page .demo-site--junipermain .jm .jm-promo__track,
  .demo-hub-page .demo-site--junipermain .jm .jm-words__track {
    animation: none !important;
  }}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--junipermain .jm .jm-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-header nav {
    display: none;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-hero,
  .demo-hub-page .demo-site--junipermain .jm .jm-story,
  .demo-hub-page .demo-site--junipermain .jm .jm-inquiry,
  .demo-hub-page .demo-site--junipermain .jm .jm-store,
  .demo-hub-page .demo-site--junipermain .jm .jm-shop__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-hero__photo {
    min-height: 380px;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-shop__tall {
    aspect-ratio: 4/3;
    min-height: 0;
    align-self: auto;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-latest__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-inquiry figure {
    min-height: 360px;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-insta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-story__imgs {
    min-height: 460px;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--junipermain .jm .jm-tools a {
    display: none;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-cats,
  .demo-hub-page .demo-site--junipermain .jm .jm-products,
  .demo-hub-page .demo-site--junipermain .jm .jm-form,
  .demo-hub-page .demo-site--junipermain .jm .jm-latest__grid,
  .demo-hub-page .demo-site--junipermain .jm .jm-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-insta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-news__form {
    flex-direction: column;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-faq__items button {
    padding: 20px !important;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-footer {
    min-height: 0;
  }
  .demo-hub-page .demo-site--junipermain .jm .jm-story__imgs {
    min-height: 380px;
  }}
/* ============================================================
   Oakline Home Services (contractor) demo - redesigned layout.
   Fusion of five references: big bold headline + notched cards, form-over-hero,
   stats row, dark numbered steps, project cards and a giant closing word.
   Scoped to .demo-site--oakline so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--oakline {
  --oa-bg: #ffffff;
  --oa-ink: #121212;
  --oa-muted: #6a6a66;
  --oa-orange: #f26a1b;
  --oa-orange-dark: #d85a10;
  --oa-light: #f5f4f1;
  --oa-line: #e4e2dd;
  --oa-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --oa-mono: Inter, Arial, sans-serif;
  --oa-gutter: max(20px, calc((100% - 1240px) / 2));
  background: var(--oa-bg) !important;
  color: var(--oa-ink);
}

.demo-hub-page .demo-site--oakline .oa {
  position: relative;
  background: var(--oa-bg);
  color: var(--oa-ink);
  font-family: var(--oa-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--oakline .oa * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--oakline .oa [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--oakline .oa img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--oakline .oa figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--oakline .oa p {
  margin: 0;
}

.demo-hub-page .demo-site--oakline .oa a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--oakline .oa article,
.demo-hub-page .demo-site--oakline .oa form {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--oakline .oa ul,
.demo-hub-page .demo-site--oakline .oa ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--oakline .oa h2,
.demo-hub-page .demo-site--oakline .oa h3,
.demo-hub-page .demo-site--oakline .oa h4 {
  margin: 0;
  max-width: none;
  text-transform: uppercase !important;
  font-family: var(--oa-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.96 !important;
  color: inherit;
}

.demo-hub-page .demo-site--oakline .oa h3 {
  font-size: clamp(2.2rem, 4.8vw, 4.4rem) !important;
}

.demo-hub-page .demo-site--oakline .oa h4 {
  font-size: 1.3rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--oa-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oa-ink);
}

.demo-hub-page .demo-site--oakline .oa .oa-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--oa-orange);
}

.demo-hub-page .demo-site--oakline .oa .oa-eyebrow--light {
  color: #fff;
}

/* buttons */
.demo-hub-page .demo-site--oakline .oa .oa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.8rem;
  border: 1px solid transparent;
  border-radius: 6px !important;
  font-family: var(--oa-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--oakline .oa .oa-btn--orange {
  background: var(--oa-orange);
  border-color: var(--oa-orange);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-btn--orange:hover {
  background: var(--oa-ink);
  border-color: var(--oa-ink);
}

.demo-hub-page .demo-site--oakline .oa .oa-btn--dark {
  background: var(--oa-ink);
  border-color: var(--oa-ink);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-btn--dark:hover {
  background: var(--oa-orange);
  border-color: var(--oa-orange);
}

.demo-hub-page .demo-site--oakline .oa .oa-btn--light {
  background: #fff;
  border-color: var(--oa-line);
  color: var(--oa-ink);
}

.demo-hub-page .demo-site--oakline .oa .oa-btn--light:hover {
  background: var(--oa-orange);
  border-color: var(--oa-orange);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-sec {
  padding: clamp(60px, 8vw, 120px) var(--oa-gutter);
}

.demo-hub-page .demo-site--oakline .oa .oa-head {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--oakline .oa .oa-head > p:not(.oa-eyebrow) {
  color: var(--oa-muted);
}

.demo-hub-page .demo-site--oakline .oa .oa-head--center {
  margin-left: auto;
  margin-right: auto;
  justify-items: center;
  text-align: center;
}

.demo-hub-page .demo-site--oakline .oa .oa-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  max-width: none;
}

.demo-hub-page .demo-site--oakline .oa .oa-head--row > div {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-head--row > p {
  max-width: 26rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-text {
  color: var(--oa-muted);
}

/* header */
.demo-hub-page .demo-site--oakline .oa .oa-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px var(--oa-gutter);
  border-bottom: 1px solid var(--oa-line);
}

.demo-hub-page .demo-site--oakline .oa .oa-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--oakline .oa .oa-brand b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--oa-orange);
  color: #fff;
  font-weight: 400;
  font-size: 1.3rem;
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-brand span {
  display: grid;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.demo-hub-page .demo-site--oakline .oa .oa-brand small {
  margin-top: 3px;
  font-family: var(--oa-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  color: var(--oa-muted);
}

.demo-hub-page .demo-site--oakline .oa .oa-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-brand--light small {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--oakline .oa .oa-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--oakline .oa .oa-nav a {
  font-family: var(--oa-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--oakline .oa .oa-nav a:hover {
  color: var(--oa-orange);
}

.demo-hub-page .demo-site--oakline .oa .oa-header__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.demo-hub-page .demo-site--oakline .oa .oa-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--oakline .oa .oa-call i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--oa-orange);
  color: #fff;
  font-style: normal;
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-call em {
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--oa-muted);
}

.demo-hub-page .demo-site--oakline .oa .oa-call em b {
  font-weight: 400;
  color: var(--oa-ink);
  font-size: 0.95rem;
}

/* hero */
.demo-hub-page .demo-site--oakline .oa .oa-hero {
  padding: clamp(36px, 5vw, 72px) var(--oa-gutter) clamp(32px, 4vw, 56px);
}

.demo-hub-page .demo-site--oakline .oa .oa-hero__head {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  margin-bottom: clamp(24px, 3vw, 44px);
  text-align: center;
}

.demo-hub-page .demo-site--oakline .oa .oa-hero h2 {
  max-width: 15ch;
  font-size: clamp(2.8rem, 7.4vw, 6.6rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.92 !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-hero__sub {
  max-width: 34rem;
  color: var(--oa-muted);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 0;
  align-items: stretch;
  min-height: 620px;
}

.demo-hub-page .demo-site--oakline .oa .oa-hero__img {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 18px !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-hero__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.05) 30%, rgba(18, 18, 18, 0.5) 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-chips {
  position: relative;
  z-index: 2;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px);
}

.demo-hub-page .demo-site--oakline .oa .oa-chips li {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--oa-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--oakline .oa .oa-quote {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  align-content: start;
  margin: clamp(16px, 2.4vw, 30px);
  padding: clamp(20px, 2.4vw, 30px);
  background: #fff;
  box-shadow: 0 18px 50px rgba(18, 18, 18, 0.25);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-quote header {
  display: grid;
  gap: 6px;
}

.demo-hub-page .demo-site--oakline .oa .oa-quote h3 {
  font-size: 1.7rem !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-quote header p {
  color: var(--oa-muted);
  font-size: 0.88rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-quote label {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--oa-muted);
}

.demo-hub-page .demo-site--oakline .oa .oa-quote__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.demo-hub-page .demo-site--oakline .oa .oa-quote input:not([type=file]),
.demo-hub-page .demo-site--oakline .oa .oa-quote select,
.demo-hub-page .demo-site--oakline .oa .oa-quote textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #c9c6c0;
  border-radius: 0 !important;
  background: transparent;
  color: var(--oa-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-quote textarea {
  resize: vertical;
  min-height: 64px;
}

.demo-hub-page .demo-site--oakline .oa .oa-quote input:focus,
.demo-hub-page .demo-site--oakline .oa .oa-quote select:focus,
.demo-hub-page .demo-site--oakline .oa .oa-quote textarea:focus {
  outline: 0;
  border-bottom-color: var(--oa-orange);
}

.demo-hub-page .demo-site--oakline .oa .oa-file {
  position: relative;
}

.demo-hub-page .demo-site--oakline .oa .oa-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.demo-hub-page .demo-site--oakline .oa .oa-file b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px dashed #bdb9b2;
  border-radius: 6px;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--oa-ink);
}

.demo-hub-page .demo-site--oakline .oa .oa-quote small {
  color: var(--oa-muted);
}

/* stats */
.demo-hub-page .demo-site--oakline .oa .oa-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--oa-gutter);
  border-block: 1px solid var(--oa-line);
}

.demo-hub-page .demo-site--oakline .oa .oa-stats > div {
  display: grid;
  gap: 4px;
  padding: clamp(22px, 3vw, 38px) 0;
  text-align: center;
}

.demo-hub-page .demo-site--oakline .oa .oa-stats > div + div {
  border-left: 1px solid var(--oa-line);
}

.demo-hub-page .demo-site--oakline .oa .oa-stats b {
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--oakline .oa .oa-stats span {
  color: var(--oa-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* services */
.demo-hub-page .demo-site--oakline .oa .oa-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}

.demo-hub-page .demo-site--oakline .oa .oa-card {
  position: relative;
  display: grid;
  align-content: end;
  height: auto !important;
  min-height: 520px !important;
  overflow: hidden;
  border-radius: 16px !important;
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--oakline .oa .oa-card figure {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0) 30%, rgba(18, 18, 18, 0.86) 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-card img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--oakline .oa .oa-card:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--oakline .oa .oa-card__body {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  padding: clamp(20px, 2.4vw, 32px);
}

.demo-hub-page .demo-site--oakline .oa .oa-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--oa-orange);
  font-family: var(--oa-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--oakline .oa .oa-card h4 {
  color: #fff;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-card p {
  max-width: 26rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-card .oa-btn {
  margin-top: 0.4rem;
}

/* why */
.demo-hub-page .demo-site--oakline .oa .oa-why {
  background: var(--oa-light);
}

.demo-hub-page .demo-site--oakline .oa .oa-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.demo-hub-page .demo-site--oakline .oa .oa-why article {
  display: grid;
  gap: 10px;
  justify-items: center;
  align-content: start;
  padding: clamp(24px, 3vw, 40px) 20px;
  background: #fff;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-why article.is-dark {
  background: var(--oa-ink);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-why i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffe6d6;
  color: var(--oa-orange);
  font-style: normal;
  font-size: 1.1rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-why article.is-dark i {
  background: var(--oa-orange);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-why p {
  max-width: 17rem;
  color: var(--oa-muted);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-why article.is-dark p {
  color: rgba(255, 255, 255, 0.75);
}

/* recent work */
.demo-hub-page .demo-site--oakline .oa .oa-work {
  background: var(--oa-ink);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-work h3 {
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-work .oa-head--row > p {
  color: rgba(255, 255, 255, 0.72);
}

.demo-hub-page .demo-site--oakline .oa .oa-projects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: clamp(10px, 1.4vw, 20px);
}

.demo-hub-page .demo-site--oakline .oa .oa-project {
  position: relative;
  overflow: hidden;
  height: auto !important;
  min-height: 260px !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-project figure {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--oakline .oa .oa-project figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0) 50%, rgba(18, 18, 18, 0.8) 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-project img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--oakline .oa .oa-project:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--oakline .oa .oa-project footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 20px;
}

.demo-hub-page .demo-site--oakline .oa .oa-project footer span {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--oakline .oa .oa-project footer small {
  padding: 4px 10px;
  background: var(--oa-orange);
  font-family: var(--oa-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--oakline .oa .oa-project--large {
  grid-column: span 2;
  grid-row: span 2;
}

/* process */
.demo-hub-page .demo-site--oakline .oa .oa-process {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

.demo-hub-page .demo-site--oakline .oa .oa-process__copy {
  display: grid;
  gap: 1.4rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-process ol {
  display: grid;
  border-top: 1px solid var(--oa-line);
  margin-top: 0.6rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-process li {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--oa-line);
}

.demo-hub-page .demo-site--oakline .oa .oa-process li span {
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 1;
  color: #d8d5cf;
  transition: color 0.2s ease;
}

.demo-hub-page .demo-site--oakline .oa .oa-process li:hover span {
  color: var(--oa-orange);
}

.demo-hub-page .demo-site--oakline .oa .oa-process li p {
  margin-top: 4px;
  color: var(--oa-muted);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-process__img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: visible;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-process__img img {
  border-radius: 16px;
}

.demo-hub-page .demo-site--oakline .oa .oa-badge {
  position: absolute;
  left: -44px;
  bottom: 36px;
  display: grid;
  place-items: center;
  gap: 2px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--oa-orange);
  color: #fff;
  text-align: center;
  box-shadow: 0 14px 34px rgba(242, 106, 27, 0.4);
  transition: background-color 0.2s ease;
}

.demo-hub-page .demo-site--oakline .oa .oa-badge:hover {
  background: var(--oa-ink);
}

.demo-hub-page .demo-site--oakline .oa .oa-badge i {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1;
}

.demo-hub-page .demo-site--oakline .oa .oa-badge span {
  font-family: var(--oa-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* voices */
.demo-hub-page .demo-site--oakline .oa .oa-voices {
  background: var(--oa-light);
}

.demo-hub-page .demo-site--oakline .oa .oa-voices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article {
  display: grid;
  gap: 1.2rem;
  align-content: space-between;
  padding: clamp(22px, 2.6vw, 34px);
  background: #fff;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article.is-dark {
  background: var(--oa-ink);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-stars {
  color: var(--oa-orange);
  letter-spacing: 0.18em;
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article > p:not(.oa-stars) {
  font-size: 1.05rem;
  line-height: 1.4;
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 1rem;
  border-top: 1px solid var(--oa-line);
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article.is-dark div {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article div i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oa-orange);
  color: #fff;
  font-style: normal;
  font-family: var(--oa-mono);
  font-size: 0.72rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article div span {
  display: grid;
  font-size: 0.85rem;
  color: var(--oa-muted);
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article.is-dark div span {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--oakline .oa .oa-voices article div b {
  font-weight: 400;
  font-size: 1rem;
  color: inherit;
}

/* pricing */
.demo-hub-page .demo-site--oakline .oa .oa-pricing {
  position: relative;
  display: grid;
  min-height: 460px;
  align-items: center;
  padding: clamp(40px, 6vw, 80px) var(--oa-gutter);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-pricing figure {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--oakline .oa .oa-pricing figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 18, 18, 0.88) 0%, rgba(18, 18, 18, 0.45) 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-pricing__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.2rem;
  justify-items: start;
  max-width: 34rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-pricing h3 {
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-pricing strong {
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.04em;
  color: var(--oa-orange);
  text-transform: uppercase;
}

.demo-hub-page .demo-site--oakline .oa .oa-pricing__copy > p:not(.oa-eyebrow) {
  color: rgba(255, 255, 255, 0.82);
}

/* area */
.demo-hub-page .demo-site--oakline .oa .oa-area {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

.demo-hub-page .demo-site--oakline .oa .oa-area__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--oakline .oa .oa-zip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  width: 100%;
  max-width: 32rem;
  padding: 18px;
  background: var(--oa-light);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.demo-hub-page .demo-site--oakline .oa .oa-zip label {
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--oa-muted);
}

.demo-hub-page .demo-site--oakline .oa .oa-zip input {
  width: 100%;
  min-height: 46px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px !important;
  background: #fff;
  color: var(--oa-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-zip input:focus {
  outline: 0;
  border-color: var(--oa-orange);
}

.demo-hub-page .demo-site--oakline .oa .oa-zip small {
  grid-column: 1/-1;
  color: var(--oa-ink);
  font-size: 0.88rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-area__img {
  position: relative;
  aspect-ratio: 4/3.2;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-area__img figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  background: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-area__img figcaption span {
  font-family: var(--oa-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oa-muted);
}

.demo-hub-page .demo-site--oakline .oa .oa-area__img figcaption strong {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* final */
.demo-hub-page .demo-site--oakline .oa .oa-final {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 640px;
  padding: clamp(40px, 6vw, 80px) var(--oa-gutter) clamp(120px, 16vw, 220px);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-final figure {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--oakline .oa .oa-final figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.35), rgba(18, 18, 18, 0.7));
}

.demo-hub-page .demo-site--oakline .oa .oa-final__panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.2rem;
  justify-items: start;
  max-width: 36rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-final h3 {
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-final__panel > p:not(.oa-eyebrow) {
  color: rgba(255, 255, 255, 0.85);
}

.demo-hub-page .demo-site--oakline .oa .oa-final__word {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -0.06em;
  margin: 0;
  text-align: center;
  font-size: 17.5vw;
  line-height: 0.8;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}

/* footer */
.demo-hub-page .demo-site--oakline .oa .oa-footer {
  padding: clamp(48px, 6vw, 80px) var(--oa-gutter) 24px;
  background: var(--oa-ink);
  color: #fff;
}

.demo-hub-page .demo-site--oakline .oa .oa-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--oakline .oa .oa-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--oakline .oa .oa-footer h4 {
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: 1.2rem !important;
}

.demo-hub-page .demo-site--oakline .oa .oa-footer p,
.demo-hub-page .demo-site--oakline .oa .oa-footer a:not(.oa-brand) {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--oakline .oa .oa-footer a:not(.oa-brand):hover {
  color: var(--oa-orange);
}

.demo-hub-page .demo-site--oakline .oa .oa-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem !important;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--oakline .oa .oa-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-nav,
  .demo-hub-page .demo-site--oakline .oa .oa-call {
    display: none;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-hero__stage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-hero__img {
    position: relative;
    inset: auto;
    aspect-ratio: 16/10;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-chips {
    padding: 14px 0;
    align-self: auto;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-chips li {
    background: var(--oa-light);
    border-color: var(--oa-line);
    color: var(--oa-ink);
  }
  .demo-hub-page .demo-site--oakline .oa .oa-quote {
    margin: 0;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--oakline .oa .oa-stats > div:nth-child(3) {
    border-left: 0;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-cards,
  .demo-hub-page .demo-site--oakline .oa .oa-voices__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--oakline .oa .oa-card {
    min-height: 420px !important;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--oakline .oa .oa-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--oakline .oa .oa-project--large {
    grid-column: span 2;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-process,
  .demo-hub-page .demo-site--oakline .oa .oa-area {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--oakline .oa .oa-badge {
    left: auto;
    right: 20px;
    bottom: -34px;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--oakline .oa .oa-head--row {
    flex-direction: column;
    align-items: flex-start;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--oakline .oa .oa-header__right .oa-btn {
    display: none;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-why__grid,
  .demo-hub-page .demo-site--oakline .oa .oa-projects,
  .demo-hub-page .demo-site--oakline .oa .oa-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--oakline .oa .oa-project--large {
    grid-column: auto;
    grid-row: auto;
  }
  .demo-hub-page .demo-site--oakline .oa .oa-quote__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--oakline .oa .oa-zip {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--oakline .oa .oa-final {
    min-height: 560px;
  }}
/* ============================================================
   Sunday Clean Co. (cleaning) demo - redesigned layout.
   Fusion of two references: deep-green dark sections with an accordion of
   services, plus a cream editorial layout with an overlaid photo hero.
   Scoped to .demo-site--sundayclean so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--sundayclean {
  --sc-green: #0c3b2c;
  --sc-green-2: #11503b;
  --sc-lime: #c8f43a;
  --sc-cream: #f4f1e8;
  --sc-ink: #101a15;
  --sc-muted: #61695f;
  --sc-line: #dcd8cb;
  --sc-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --sc-mono: Inter, Arial, sans-serif;
  --sc-gutter: max(20px, calc((100% - 1240px) / 2));
  background: #fff !important;
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc {
  position: relative;
  background: #fff;
  color: var(--sc-ink);
  font-family: var(--sc-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--sundayclean .sc * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--sundayclean .sc [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--sundayclean .sc img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--sundayclean .sc figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--sundayclean .sc p {
  margin: 0;
}

.demo-hub-page .demo-site--sundayclean .sc a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--sundayclean .sc article,
.demo-hub-page .demo-site--sundayclean .sc form,
.demo-hub-page .demo-site--sundayclean .sc aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--sundayclean .sc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--sundayclean .sc h3,
.demo-hub-page .demo-site--sundayclean .sc h4,
.demo-hub-page .demo-site--sundayclean .sc h2 {
  margin: 0;
  max-width: none;
  font-family: var(--sc-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
  color: inherit;
}

.demo-hub-page .demo-site--sundayclean .sc h2 {
  font-size: clamp(3rem, 7vw, 6rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.94 !important;
}

.demo-hub-page .demo-site--sundayclean .sc h3 {
  font-size: clamp(2.1rem, 4.2vw, 3.8rem) !important;
}

.demo-hub-page .demo-site--sundayclean .sc h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--sundayclean .sc em {
  font-style: normal;
  font-family: var(--sc-mono);
  letter-spacing: -0.06em;
  color: #2c8a3f;
  font-size: 0.92em;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--sc-green);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-eyebrow--light {
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-eyebrow--light::before {
  background: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-text {
  color: var(--sc-muted);
  max-width: 34rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 1.4rem 0 1.7rem;
  border: 1px solid transparent;
  border-radius: 8px !important;
  font-family: var(--sc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  font-style: normal;
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--green {
  background: var(--sc-green);
  border-color: var(--sc-green);
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--green:hover {
  background: var(--sc-lime);
  border-color: var(--sc-lime);
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--green:hover i {
  background: rgba(16, 26, 21, 0.12);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--white i {
  background: var(--sc-green);
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--white:hover {
  background: var(--sc-lime);
  border-color: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--ghost {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  padding: 0 1.7rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--ghost:hover {
  background: #fff;
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--lime {
  background: var(--sc-lime);
  border-color: var(--sc-lime);
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--lime i {
  background: rgba(16, 26, 21, 0.12);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-btn--lime:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-sec {
  padding: clamp(60px, 8vw, 120px) var(--sc-gutter);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-head > div {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-head > p:not(.sc-eyebrow) {
  max-width: 24rem;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* header */
.demo-hub-page .demo-site--sundayclean .sc .sc-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: clamp(10px, 1.6vw, 22px) var(--sc-gutter) 0;
  padding: 10px 10px 10px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 26, 21, 0.12);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-brand b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--sc-green);
  color: var(--sc-lime);
  font-weight: 400;
  font-size: 1.2rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-brand span {
  display: grid;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-brand small {
  margin-top: 3px;
  font-family: var(--sc-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-brand--light b {
  background: var(--sc-lime);
  color: var(--sc-green);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-brand--light small {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-nav a {
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-nav a:hover {
  color: #2c8a3f;
}

/* hero */
.demo-hub-page .demo-site--sundayclean .sc .sc-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  min-height: 720px;
  margin-top: calc(-1 * clamp(10px, 1.6vw, 22px) - 70px);
  padding: 150px var(--sc-gutter) clamp(28px, 3.4vw, 48px);
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__bg img {
  -o-object-position: 60% 12%;
     object-position: 60% 12%;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.13) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 30%);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: 40rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-rating > span:last-child {
  display: grid;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.8);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-rating b {
  font-weight: 400;
  color: var(--sc-lime);
  letter-spacing: 0.04em;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-faces {
  display: inline-flex;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-faces i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sc-green-2);
  color: #fff;
  font-style: normal;
  font-family: var(--sc-mono);
  font-size: 0.55rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-faces i:first-child {
  margin-left: 0;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero h2 em {
  color: var(--sc-lime);
  display: inline;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__sub {
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__cards {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__cards figure {
  width: 170px;
  border: 4px solid #fff;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__cards aside {
  display: grid;
  gap: 6px;
  align-content: end;
  width: 250px;
  padding: 18px;
  background: #fff;
  color: var(--sc-ink);
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__cards i {
  font-style: normal;
  color: #2c8a3f;
  font-size: 1.3rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__cards strong {
  font-weight: 400;
  font-size: 1rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-hero__cards aside span {
  color: var(--sc-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* trust */
.demo-hub-page .demo-site--sundayclean .sc .sc-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--sc-gutter);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-trust span {
  padding: 24px 12px;
  text-align: center;
  font-family: var(--sc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-trust span + span {
  border-left: 1px solid var(--sc-line);
}

/* about */
.demo-hub-page .demo-site--sundayclean .sc .sc-about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  background: var(--sc-cream);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-about__img {
  aspect-ratio: 4/5;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-about__copy {
  display: grid;
  gap: 1.6rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-about h3 {
  font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-stats > div {
  display: grid;
  gap: 28px;
  padding: 22px;
  background: #fff;
  border-radius: 12px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-stats > div.is-lime {
  background: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-stats b {
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-stats span {
  font-size: 0.85rem;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-stats .is-lime span {
  color: var(--sc-ink);
}

/* services accordion */
.demo-hub-page .demo-site--sundayclean .sc .sc-services {
  background: var(--sc-green);
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-services h3 {
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-services em {
  color: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-services .sc-head > p:not(.sc-eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc {
  display: grid;
  gap: 12px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__item {
  background: var(--sc-green-2);
  border-radius: 12px !important;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__item.is-open {
  background: #fff;
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__head {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 22px 26px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__head span {
  font-family: var(--sc-mono);
  font-size: 0.8rem;
  opacity: 0.6;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__head h4 {
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__head i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  font-style: normal;
  font-size: 1.2rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__item.is-open .sc-acc__head i {
  background: var(--sc-green);
  color: #fff;
  transform: rotate(45deg);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__item:not(.is-open) .sc-acc__head:hover i {
  background: var(--sc-lime);
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__item.is-open .sc-acc__panel {
  grid-template-rows: 1fr;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  min-height: 0;
  overflow: hidden;
  padding: 0 26px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__item.is-open .sc-acc__inner {
  padding-bottom: 26px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__text {
  display: grid;
  gap: 1.2rem;
  align-content: start;
  justify-items: start;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__text > p {
  max-width: 30rem;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__text ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__text li {
  padding: 6px 14px;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  font-size: 0.8rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-acc__inner figure {
  min-height: 300px;
  border-radius: 10px !important;
}

/* quote */
.demo-hub-page .demo-site--sundayclean .sc .sc-quote {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  background: var(--sc-cream);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-quote__intro {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-quote__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.8rem;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--sc-muted);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form input:not([type=checkbox]),
.demo-hub-page .demo-site--sundayclean .sc .sc-form select {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--sc-line);
  border-radius: 8px !important;
  background: #fff;
  color: var(--sc-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form input:focus,
.demo-hub-page .demo-site--sundayclean .sc .sc-form select:focus {
  outline: 0;
  border-color: var(--sc-green);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--sc-line);
  border-radius: 8px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form legend {
  padding: 0 6px;
  font-family: var(--sc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form fieldset label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form fieldset input {
  accent-color: var(--sc-green);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-form .sc-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-result {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: var(--sc-green);
  color: #fff;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-result span {
  font-family: var(--sc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-result strong {
  font-weight: 400;
  font-size: 1.2rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-result p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
}

/* included */
.demo-hub-page .demo-site--sundayclean .sc .sc-included {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-included__copy {
  display: grid;
  gap: 1.2rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist {
  display: grid;
  margin-top: 0.6rem;
  border-top: 1px solid var(--sc-line);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 18px 12px;
  border-bottom: 1px solid var(--sc-line);
  transition: background-color 0.2s ease;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist li:hover {
  background: var(--sc-cream);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist li.is-lime {
  background: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist span {
  font-family: var(--sc-mono);
  font-size: 0.8rem;
  color: var(--sc-muted);
  padding-top: 4px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist li.is-lime span {
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist b {
  display: block;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist small {
  color: var(--sc-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-checklist li.is-lime small {
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-included__photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-included__photos figure {
  aspect-ratio: 4/3;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-included__photos figure:last-child {
  width: 70%;
  justify-self: end;
  aspect-ratio: 1;
}

/* process */
.demo-hub-page .demo-site--sundayclean .sc .sc-process {
  background: var(--sc-green);
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-process h3 {
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-process em {
  color: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-steps article {
  display: grid;
  gap: 14px;
  align-content: space-between;
  min-height: 260px !important;
  padding: 24px;
  background: var(--sc-green-2);
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-steps article.is-lime {
  background: var(--sc-lime);
  color: var(--sc-ink);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-steps b {
  font-weight: 400;
  font-size: 3rem;
  letter-spacing: -0.05em;
  line-height: 1;
  opacity: 0.5;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-steps p {
  margin-top: 8px;
  font-size: 0.92rem;
  opacity: 0.8;
}

/* reviews */
.demo-hub-page .demo-site--sundayclean .sc .sc-reviews {
  background: var(--sc-cream);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-reviews article {
  display: grid;
  gap: 1rem;
  align-content: space-between;
  min-height: 300px !important;
  padding: 28px;
  background: #fff;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-reviews article.is-green {
  background: var(--sc-green);
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-stars {
  color: #2c8a3f;
  letter-spacing: 0.18em;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-reviews article.is-green .sc-stars {
  color: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-reviews article > p:nth-child(2) {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-reviews small {
  font-family: var(--sc-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-reviews figure {
  min-height: 300px;
  border-radius: 12px !important;
}

/* area */
.demo-hub-page .demo-site--sundayclean .sc .sc-area {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-area__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-zip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  max-width: 32rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-zip input {
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--sc-line);
  border-radius: 8px !important;
  font-size: 0.95rem;
  color: var(--sc-ink);
  background: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-zip input:focus {
  outline: 0;
  border-color: var(--sc-green);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-zip small {
  grid-column: 1/-1;
  color: var(--sc-ink);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-area figure {
  aspect-ratio: 4/3;
  border-radius: 14px !important;
}

/* final */
.demo-hub-page .demo-site--sundayclean .sc .sc-final {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 560px;
  padding: clamp(40px, 6vw, 90px) var(--sc-gutter);
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-final figure {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-final figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.23));
}

.demo-hub-page .demo-site--sundayclean .sc .sc-final > div {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: 40rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-final h3 {
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-final em {
  color: var(--sc-lime);
}

/* footer */
.demo-hub-page .demo-site--sundayclean .sc .sc-footer {
  padding: clamp(48px, 6vw, 80px) var(--sc-gutter) 24px;
  background: var(--sc-ink);
  color: #fff;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-footer h4 {
  margin-bottom: 0.4rem;
  color: var(--sc-lime);
  font-family: var(--sc-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-footer p,
.demo-hub-page .demo-site--sundayclean .sc .sc-footer a:not(.sc-brand) {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--sundayclean .sc .sc-footer a:not(.sc-brand):hover {
  color: var(--sc-lime);
}

.demo-hub-page .demo-site--sundayclean .sc .sc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem !important;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--sundayclean .sc .sc-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-nav {
    display: none;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 680px;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-hero__cards {
    display: none;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-trust span:nth-child(3) {
    border-left: 0;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-about,
  .demo-hub-page .demo-site--sundayclean .sc .sc-quote,
  .demo-hub-page .demo-site--sundayclean .sc .sc-included,
  .demo-hub-page .demo-site--sundayclean .sc .sc-area {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-about__img {
    aspect-ratio: 4/3;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-acc__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-acc__inner figure {
    min-height: 220px;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-reviews__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-head--center {
    align-items: center;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--sundayclean .sc .sc-header .sc-btn {
    display: none;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-hero {
    padding-top: 130px;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-hero__actions .sc-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-steps,
  .demo-hub-page .demo-site--sundayclean .sc .sc-footer__grid,
  .demo-hub-page .demo-site--sundayclean .sc .sc-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-steps article {
    min-height: 0 !important;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-zip {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-acc__head {
    padding: 18px 16px;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-acc__inner {
    padding: 0 16px;
  }
  .demo-hub-page .demo-site--sundayclean .sc .sc-included__photos figure:last-child {
    width: 100%;
  }}
/* ============================================================
   Greenline Yard Co. (landscaping) demo - redesigned layout.
   Fusion of five references: floating-nav photo hero with a booking card and
   service thumbnails, scattered-photo statement on sage, dark-green service
   cards, before/after comparison, testimonial photo and stacked-photo closing.
   Scoped to .demo-site--greenline so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--greenline {
  --ls-forest: #10301f;
  --ls-forest-2: #17452d;
  --ls-green: #1b9a4f;
  --ls-lime: #c8f43a;
  --ls-sage: #d3e0b0;
  --ls-ink: #0e1a13;
  --ls-muted: #5c675f;
  --ls-line: #dfe5d8;
  --ls-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --ls-mono: Inter, Arial, sans-serif;
  --ls-gutter: max(20px, calc((100% - 1240px) / 2));
  background: #fff !important;
  color: var(--ls-ink);
}

.demo-hub-page .demo-site--greenline .ls {
  position: relative;
  background: #fff;
  color: var(--ls-ink);
  font-family: var(--ls-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--greenline .ls * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--greenline .ls [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--greenline .ls img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--greenline .ls figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--greenline .ls p {
  margin: 0;
}

.demo-hub-page .demo-site--greenline .ls a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--greenline .ls article,
.demo-hub-page .demo-site--greenline .ls form,
.demo-hub-page .demo-site--greenline .ls aside,
.demo-hub-page .demo-site--greenline .ls blockquote {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--greenline .ls ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--greenline .ls .ls-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.demo-hub-page .demo-site--greenline .ls h2,
.demo-hub-page .demo-site--greenline .ls h3,
.demo-hub-page .demo-site--greenline .ls h4 {
  margin: 0;
  max-width: none;
  font-family: var(--ls-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
  color: inherit;
}

.demo-hub-page .demo-site--greenline .ls h2 {
  font-size: clamp(2.8rem, 6.4vw, 5.6rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.96 !important;
}

.demo-hub-page .demo-site--greenline .ls h3 {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
}

.demo-hub-page .demo-site--greenline .ls h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--greenline .ls em {
  font-style: normal;
  font-family: var(--ls-mono);
  letter-spacing: -0.06em;
  color: var(--ls-green);
  font-size: 0.92em;
}

.demo-hub-page .demo-site--greenline .ls .ls-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ls-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--greenline .ls .ls-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--ls-green);
}

.demo-hub-page .demo-site--greenline .ls .ls-eyebrow--light {
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-eyebrow--light::before {
  background: var(--ls-lime);
}

.demo-hub-page .demo-site--greenline .ls .ls-text {
  color: var(--ls-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-family: var(--ls-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--greenline .ls .ls-btn i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: -10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-style: normal;
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--green {
  background: var(--ls-green);
  border-color: var(--ls-green);
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--green:hover {
  background: var(--ls-forest);
  border-color: var(--ls-forest);
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--ls-ink);
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--white i {
  background: var(--ls-green);
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--white:hover {
  background: var(--ls-lime);
  border-color: var(--ls-lime);
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--ghost:hover {
  background: #fff;
  color: var(--ls-ink);
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--lime {
  background: var(--ls-lime);
  border-color: var(--ls-lime);
  color: var(--ls-ink);
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--lime i {
  background: rgba(14, 26, 19, 0.12);
}

.demo-hub-page .demo-site--greenline .ls .ls-btn--lime:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-sec {
  padding: clamp(60px, 8vw, 120px) var(--ls-gutter);
}

.demo-hub-page .demo-site--greenline .ls .ls-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--greenline .ls .ls-head > div {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-head > p:not(.ls-eyebrow) {
  max-width: 24rem;
  color: var(--ls-muted);
}

/* header */
.demo-hub-page .demo-site--greenline .ls .ls-header {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: clamp(10px, 1.6vw, 22px) var(--ls-gutter) 0;
  padding: 8px 8px 8px 20px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(14, 26, 19, 0.14);
}

.demo-hub-page .demo-site--greenline .ls .ls-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--greenline .ls .ls-brand b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ls-green);
  color: #fff;
  font-weight: 400;
  font-size: 1.15rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-brand span {
  display: grid;
  font-size: 1.25rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.demo-hub-page .demo-site--greenline .ls .ls-brand small {
  margin-top: 3px;
  font-family: var(--ls-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ls-muted);
}

.demo-hub-page .demo-site--greenline .ls .ls-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-brand--light b {
  background: var(--ls-lime);
  color: var(--ls-forest);
}

.demo-hub-page .demo-site--greenline .ls .ls-brand--light small {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--greenline .ls .ls-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--greenline .ls .ls-nav a {
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-nav a:hover {
  color: var(--ls-green);
}

/* hero */
.demo-hub-page .demo-site--greenline .ls .ls-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: 1fr auto;
  gap: 28px 28px;
  min-height: 820px;
  margin-top: calc(-1 * clamp(10px, 1.6vw, 22px) - 64px);
  padding: 150px var(--ls-gutter) clamp(24px, 3vw, 40px);
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0.1) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 40%);
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__bg img {
  transition: opacity 0.35s ease;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  align-content: end;
  max-width: 44rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero h2 em {
  color: var(--ls-lime);
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__sub {
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__card {
  display: grid;
  gap: 12px;
  align-content: end;
  align-self: end;
  padding: 24px;
  background: #fff;
  color: var(--ls-ink);
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(8, 28, 17, 0.35);
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__card h3 {
  font-size: 1.6rem !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__card p {
  color: var(--ls-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__card input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--ls-line);
  border-radius: 10px !important;
  background: #f4f7f0;
  color: var(--ls-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__card input:focus {
  outline: 0;
  border-color: var(--ls-green);
}

.demo-hub-page .demo-site--greenline .ls .ls-hero__card .ls-btn {
  width: 100%;
}

.demo-hub-page .demo-site--greenline .ls .ls-thumbs {
  grid-column: 1/-1;
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 18px;
  color: var(--ls-ink);
}

.demo-hub-page .demo-site--greenline .ls .ls-thumb {
  display: grid;
  gap: 6px;
  width: 150px;
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 12px !important;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease;
}

.demo-hub-page .demo-site--greenline .ls .ls-thumb img {
  height: 70px;
  border-radius: 8px;
}

.demo-hub-page .demo-site--greenline .ls .ls-thumb span {
  font-family: var(--ls-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--greenline .ls .ls-thumb:hover,
.demo-hub-page .demo-site--greenline .ls .ls-thumb.is-active {
  border-color: var(--ls-green);
}

.demo-hub-page .demo-site--greenline .ls .ls-thumbs__note {
  display: grid;
  align-content: center;
  margin-left: auto;
  padding: 0 16px;
  font-size: 0.82rem;
  color: var(--ls-muted);
}

.demo-hub-page .demo-site--greenline .ls .ls-thumbs__note b {
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ls-ink);
  letter-spacing: -0.02em;
}

/* trust */
.demo-hub-page .demo-site--greenline .ls .ls-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--ls-gutter);
}

.demo-hub-page .demo-site--greenline .ls .ls-trust span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 12px;
  font-family: var(--ls-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ls-muted);
}

.demo-hub-page .demo-site--greenline .ls .ls-trust span + span {
  border-left: 1px solid var(--ls-line);
}

.demo-hub-page .demo-site--greenline .ls .ls-trust i {
  color: var(--ls-green);
  font-style: normal;
  font-size: 1.1rem;
}

/* about collage */
.demo-hub-page .demo-site--greenline .ls .ls-about {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 680px;
  background: var(--ls-sage);
  background-image: radial-gradient(rgba(16, 48, 31, 0.28) 1px, transparent 1.4px);
  background-size: 7px 7px;
  overflow: hidden;
}

.demo-hub-page .demo-site--greenline .ls .ls-about__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  max-width: 36rem;
  text-align: center;
}

.demo-hub-page .demo-site--greenline .ls .ls-about h3 {
  font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-tile {
  position: absolute;
  z-index: 1;
  border-radius: 6px !important;
  box-shadow: 0 14px 34px rgba(16, 48, 31, 0.28);
}

.demo-hub-page .demo-site--greenline .ls .ls-tile--1 {
  left: 4%;
  top: 12%;
  width: 17%;
  aspect-ratio: 4/5;
}

.demo-hub-page .demo-site--greenline .ls .ls-tile--2 {
  left: 15%;
  bottom: 8%;
  width: 15%;
  aspect-ratio: 1;
}

.demo-hub-page .demo-site--greenline .ls .ls-tile--3 {
  left: 34%;
  top: 6%;
  width: 12%;
  aspect-ratio: 1;
}

.demo-hub-page .demo-site--greenline .ls .ls-tile--4 {
  right: 6%;
  top: 10%;
  width: 18%;
  aspect-ratio: 4/3;
}

.demo-hub-page .demo-site--greenline .ls .ls-tile--5 {
  right: 20%;
  bottom: 7%;
  width: 12%;
  aspect-ratio: 1;
}

.demo-hub-page .demo-site--greenline .ls .ls-tile--6 {
  right: 3%;
  bottom: 14%;
  width: 15%;
  aspect-ratio: 4/5;
}

/* services */
.demo-hub-page .demo-site--greenline .ls .ls-services {
  background: var(--ls-forest);
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-services h3 {
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-services em {
  color: var(--ls-lime);
}

.demo-hub-page .demo-site--greenline .ls .ls-services .ls-head > p:not(.ls-eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.demo-hub-page .demo-site--greenline .ls .ls-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}

.demo-hub-page .demo-site--greenline .ls .ls-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 540px !important;
  overflow: hidden;
  border-radius: 18px !important;
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--greenline .ls .ls-card figure {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.demo-hub-page .demo-site--greenline .ls .ls-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.45) 100%);
}

.demo-hub-page .demo-site--greenline .ls .ls-card img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--greenline .ls .ls-card:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--greenline .ls .ls-card__body {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  padding: clamp(20px, 2.4vw, 30px);
}

.demo-hub-page .demo-site--greenline .ls .ls-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ls-lime);
  color: var(--ls-ink);
  font-family: var(--ls-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--greenline .ls .ls-card h4 {
  color: #fff;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem) !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-card p {
  max-width: 24rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-card .ls-btn {
  margin-top: 0.4rem;
}

/* work */
.demo-hub-page .demo-site--greenline .ls .ls-work {
  background: #f6f8f2;
}

.demo-hub-page .demo-site--greenline .ls .ls-compare {
  height: min(52vw, 40rem) !important;
  min-height: 24rem !important;
  border-radius: 18px !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-compare figure {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-compare > i::after {
  background: var(--ls-green) !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-compare .landscape-comparison__after figcaption {
  background: var(--ls-green) !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-note {
  display: block;
  margin: 12px 0 28px;
  font-family: var(--ls-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ls-muted);
}

.demo-hub-page .demo-site--greenline .ls .ls-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--greenline .ls .ls-strip figure {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-strip figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--ls-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--greenline .ls .ls-strip img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--greenline .ls .ls-strip figure:hover img {
  transform: scale(1.05);
}

/* why */
.demo-hub-page .demo-site--greenline .ls .ls-why {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

.demo-hub-page .demo-site--greenline .ls .ls-why__img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: visible !important;
  border-radius: 18px !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-why__img img {
  border-radius: 18px;
}

.demo-hub-page .demo-site--greenline .ls .ls-why blockquote {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 18px 20px;
  background: #fff;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(14, 26, 19, 0.2);
}

.demo-hub-page .demo-site--greenline .ls .ls-why blockquote p {
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.demo-hub-page .demo-site--greenline .ls .ls-why blockquote footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--greenline .ls .ls-why blockquote i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ls-green);
  color: #fff;
  font-style: normal;
  font-family: var(--ls-mono);
  font-size: 0.62rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-why blockquote span {
  display: grid;
  font-size: 0.8rem;
  color: var(--ls-muted);
  line-height: 1.3;
}

.demo-hub-page .demo-site--greenline .ls .ls-why blockquote b {
  font-weight: 400;
  color: var(--ls-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-why__copy {
  display: grid;
  gap: 1.4rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-promises {
  display: grid;
  border-top: 1px solid var(--ls-line);
  margin-top: 0.4rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-promises li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--ls-line);
}

.demo-hub-page .demo-site--greenline .ls .ls-promises i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e3f3e8;
  color: var(--ls-green);
  font-style: normal;
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-promises b {
  display: block;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--greenline .ls .ls-promises span {
  color: var(--ls-muted);
  font-size: 0.92rem;
}

/* quote */
.demo-hub-page .demo-site--greenline .ls .ls-quote {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  background: var(--ls-sage);
}

.demo-hub-page .demo-site--greenline .ls .ls-quote__intro {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--greenline .ls .ls-quote__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.8rem;
  border-radius: 18px !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border-radius: 18px !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ls-muted);
}

.demo-hub-page .demo-site--greenline .ls .ls-form input:not([type=file]),
.demo-hub-page .demo-site--greenline .ls .ls-form select {
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--ls-line);
  border-radius: 10px !important;
  background: #fff;
  color: var(--ls-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-form input:focus,
.demo-hub-page .demo-site--greenline .ls .ls-form select:focus {
  outline: 0;
  border-color: var(--ls-green);
}

.demo-hub-page .demo-site--greenline .ls .ls-file {
  position: relative;
}

.demo-hub-page .demo-site--greenline .ls .ls-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.demo-hub-page .demo-site--greenline .ls .ls-file b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px dashed #b7c4ae;
  border-radius: 10px;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ls-ink);
}

.demo-hub-page .demo-site--greenline .ls .ls-form .ls-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--greenline .ls .ls-form small {
  color: var(--ls-muted);
}

/* area */
.demo-hub-page .demo-site--greenline .ls .ls-area {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--greenline .ls .ls-area__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--greenline .ls .ls-zip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  max-width: 32rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-zip input {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ls-line);
  border-radius: 999px !important;
  font-size: 0.95rem;
  color: var(--ls-ink);
  background: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-zip input:focus {
  outline: 0;
  border-color: var(--ls-green);
}

.demo-hub-page .demo-site--greenline .ls .ls-zip small {
  grid-column: 1/-1;
  color: var(--ls-ink);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-area figure {
  aspect-ratio: 4/3;
  border-radius: 18px !important;
}

/* final */
.demo-hub-page .demo-site--greenline .ls .ls-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(60px, 8vw, 110px) var(--ls-gutter);
  background: var(--ls-ink);
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-final__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}

.demo-hub-page .demo-site--greenline .ls .ls-final h3 {
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-final em {
  color: var(--ls-lime);
}

.demo-hub-page .demo-site--greenline .ls .ls-final__stack {
  position: relative;
  aspect-ratio: 4/3;
}

.demo-hub-page .demo-site--greenline .ls .ls-final__stack figure {
  position: absolute;
  border-radius: 6px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.demo-hub-page .demo-site--greenline .ls .ls-final__stack figure:nth-child(1) {
  left: 0;
  top: 14%;
  width: 30%;
  height: 66%;
}

.demo-hub-page .demo-site--greenline .ls .ls-final__stack figure:nth-child(2) {
  left: 14%;
  top: 7%;
  width: 30%;
  height: 76%;
}

.demo-hub-page .demo-site--greenline .ls .ls-final__stack figure:nth-child(3) {
  left: 28%;
  top: 0;
  width: 72%;
  height: 100%;
}

/* footer */
.demo-hub-page .demo-site--greenline .ls .ls-footer {
  padding: clamp(48px, 6vw, 80px) var(--ls-gutter) 24px;
  background: var(--ls-forest);
  color: #fff;
}

.demo-hub-page .demo-site--greenline .ls .ls-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--greenline .ls .ls-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--greenline .ls .ls-footer h4 {
  margin-bottom: 0.4rem;
  color: var(--ls-lime);
  font-family: var(--ls-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--greenline .ls .ls-footer p,
.demo-hub-page .demo-site--greenline .ls .ls-footer a:not(.ls-brand) {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--greenline .ls .ls-footer a:not(.ls-brand):hover {
  color: var(--ls-lime);
}

.demo-hub-page .demo-site--greenline .ls .ls-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem !important;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--greenline .ls .ls-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-nav {
    display: none;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-hero__card {
    align-self: start;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-thumbs__note {
    display: none;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--greenline .ls .ls-trust span:nth-child(3) {
    border-left: 0;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-about {
    min-height: 0;
    padding-top: 280px;
    padding-bottom: 280px;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-tile--1 {
    left: 6%;
    top: 5%;
    width: 24%;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-tile--2 {
    left: 38%;
    top: 3%;
    width: 22%;
    bottom: auto;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-tile--3 {
    left: auto;
    right: 6%;
    top: 5%;
    width: 24%;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-tile--4 {
    right: auto;
    left: 6%;
    top: auto;
    bottom: 4%;
    width: 28%;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-tile--5 {
    right: auto;
    left: 40%;
    bottom: 4%;
    width: 20%;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-tile--6 {
    right: 6%;
    bottom: 4%;
    width: 24%;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--greenline .ls .ls-card {
    min-height: 420px !important;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--greenline .ls .ls-why,
  .demo-hub-page .demo-site--greenline .ls .ls-quote,
  .demo-hub-page .demo-site--greenline .ls .ls-area,
  .demo-hub-page .demo-site--greenline .ls .ls-final {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--greenline .ls .ls-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--greenline .ls .ls-head {
    flex-direction: column;
    align-items: flex-start;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--greenline .ls .ls-header {
    grid-template-columns: 1fr;
    border-radius: 18px;
    padding: 10px 14px;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-header .ls-btn {
    display: none;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-hero {
    padding-top: 120px;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-hero__actions .ls-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-thumb {
    width: calc(33.33% - 10px);
  }
  .demo-hub-page .demo-site--greenline .ls .ls-about {
    padding-top: 220px;
    padding-bottom: 240px;
  }
  .demo-hub-page .demo-site--greenline .ls .ls-footer__grid,
  .demo-hub-page .demo-site--greenline .ls .ls-zip {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--greenline .ls .ls-compare {
    min-height: 20rem !important;
  }}
/* ============================================================
   Northside Plumbing (plumbing) demo - redesigned layout.
   Fusion of three references: navy + neon-lime photo hero with a ticker band,
   lime-tabbed service cards, a clean cream request section and a featured
   works grid. Scoped to .demo-site--northsideplumbing so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--northsideplumbing {
  --pb-navy: #0b2a86;
  --pb-navy-2: #0a2370;
  --pb-lime: #bdf51f;
  --pb-ink: #0c1230;
  --pb-muted: #5f6682;
  --pb-cream: #f6f5f1;
  --pb-line: #dedcd4;
  --pb-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --pb-mono: Inter, Arial, sans-serif;
  --pb-gutter: max(20px, calc((100% - 1240px) / 2));
  background: #fff !important;
  color: var(--pb-ink);
}

.demo-hub-page .demo-site--northsideplumbing .pb {
  position: relative;
  background: #fff;
  color: var(--pb-ink);
  font-family: var(--pb-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--northsideplumbing .pb * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--northsideplumbing .pb [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--northsideplumbing .pb figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb p {
  margin: 0;
}

.demo-hub-page .demo-site--northsideplumbing .pb a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--northsideplumbing .pb article,
.demo-hub-page .demo-site--northsideplumbing .pb form,
.demo-hub-page .demo-site--northsideplumbing .pb aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb h2,
.demo-hub-page .demo-site--northsideplumbing .pb h3,
.demo-hub-page .demo-site--northsideplumbing .pb h4 {
  margin: 0;
  max-width: none;
  font-family: var(--pb-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
  color: inherit;
}

.demo-hub-page .demo-site--northsideplumbing .pb h2 {
  font-size: clamp(2.8rem, 6.2vw, 5.4rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.96 !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb h3 {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb em {
  font-style: normal;
  font-family: var(--pb-mono);
  letter-spacing: -0.06em;
  color: var(--pb-navy);
  font-size: 0.92em;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pb-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-eyebrow--light {
  color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-eyebrow--light::before {
  background: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-text {
  color: var(--pb-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-family: var(--pb-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn--lime {
  background: var(--pb-lime);
  border-color: var(--pb-lime);
  color: var(--pb-ink);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn--lime:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn--ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn--ghost:hover {
  background: #fff;
  color: var(--pb-ink);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn--black {
  background: var(--pb-ink);
  border-color: var(--pb-ink);
  color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn--black:hover {
  background: var(--pb-navy);
  border-color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--pb-ink);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-btn--white:hover {
  background: var(--pb-lime);
  border-color: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-sec {
  padding: clamp(60px, 8vw, 120px) var(--pb-gutter);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-head > div {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-head > p:not(.pb-eyebrow) {
  max-width: 24rem;
  color: var(--pb-muted);
}

/* header */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-header {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px var(--pb-gutter);
  background: #fff;
  border-bottom: 1px solid var(--pb-line);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-brand b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 4px;
  background: var(--pb-navy);
  color: var(--pb-lime);
  font-weight: 400;
  font-size: 1.2rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-brand span {
  display: grid;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-brand small {
  margin-top: 3px;
  font-family: var(--pb-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-muted);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-brand--light b {
  background: var(--pb-lime);
  color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-brand--light small {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-nav a {
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-nav a:hover {
  color: var(--pb-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  min-height: 46px;
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-call i {
  font-style: normal;
  color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-call:hover {
  border-color: var(--pb-navy);
}

/* hero */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: end;
  gap: 28px;
  min-height: 780px;
  padding: clamp(48px, 7vw, 100px) var(--pb-gutter) 140px;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__bg img {
  -o-object-position: 50% 20%;
     object-position: 50% 20%;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.13) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 40%);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: 44rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero h2 em {
  color: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__sub {
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--pb-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__meta span::before {
  content: "• ";
  color: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__alert {
  display: grid;
  gap: 8px;
  padding: 22px;
  background: #fff;
  color: var(--pb-ink);
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(8, 20, 70, 0.4);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__alert i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pb-lime);
  font-style: normal;
  font-size: 1.1rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__alert span {
  font-family: var(--pb-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-muted);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__alert strong {
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__alert a {
  color: var(--pb-navy);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__alert a:hover {
  text-decoration: underline;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-ticker {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 36px;
  overflow: hidden;
  background: var(--pb-lime);
  color: var(--pb-ink);
  transform: rotate(-1.6deg);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-ticker > div {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: pb-ticker 26s linear infinite;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-ticker span {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 18px 22px;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-ticker span::after {
  content: "✦";
  font-size: 0.9em;
  color: var(--pb-navy);
}@media (prefers-reduced-motion: reduce) {
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-ticker > div {
    animation: none;
  }}
/* stats */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--pb-gutter);
  border-bottom: 1px solid var(--pb-line);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-stats > div {
  display: grid;
  gap: 4px;
  padding: clamp(28px, 4vw, 52px) 20px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-stats > div + div {
  border-left: 1px solid var(--pb-line);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-stats b {
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-stats span {
  color: var(--pb-muted);
  font-size: 0.85rem;
}

/* about */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-about {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 180px;
  gap: clamp(20px, 4vw, 70px);
  align-items: center;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-about figure {
  aspect-ratio: 3/4;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-about__a {
  align-self: start;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-about__b {
  align-self: end;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-about__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-about__copy .pb-eyebrow::before {
  display: inline-block;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-about h3 {
  font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
  max-width: 30ch;
}

/* services */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-services {
  background: var(--pb-navy);
  color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-services h3 {
  color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-services em {
  color: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-services .pb-head > p:not(.pb-eyebrow) {
  color: rgba(255, 255, 255, 0.78);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 500px !important;
  overflow: hidden;
  border-radius: 16px !important;
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card figure {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.43) 100%);
  transition: background 0.3s ease;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card:hover figure::after {
  background: rgba(0, 0, 0, 0.4);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card h4 {
  display: grid;
  gap: 2px;
  padding: 18px 18px 22px;
  background: var(--pb-lime);
  color: var(--pb-ink);
  font-size: 1.35rem !important;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card h4 span {
  font-family: var(--pb-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card__body {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 0 18px 18px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card:hover .pb-card__body,
.demo-hub-page .demo-site--northsideplumbing .pb .pb-card:focus-within .pb-card__body {
  max-height: 220px;
  opacity: 1;
  padding-top: 6px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-card__body p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
}

/* emergency */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-emergency {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
  padding: clamp(48px, 6vw, 90px) var(--pb-gutter);
  background: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-emergency__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-emergency__copy p:not(.pb-eyebrow) {
  max-width: 32rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-emergency h3 em {
  color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-emergency aside {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 28px;
  background: var(--pb-ink);
  color: #fff;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-emergency aside span {
  font-family: var(--pb-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-emergency aside strong {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* request */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-request {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  background: var(--pb-cream);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-request__intro {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-request__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.8rem;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--pb-muted);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-form input,
.demo-hub-page .demo-site--northsideplumbing .pb .pb-form select,
.demo-hub-page .demo-site--northsideplumbing .pb .pb-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--pb-line);
  border-radius: 10px !important;
  background: #fff;
  color: var(--pb-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-form textarea {
  resize: vertical;
  min-height: 110px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-form input:focus,
.demo-hub-page .demo-site--northsideplumbing .pb .pb-form select:focus,
.demo-hub-page .demo-site--northsideplumbing .pb .pb-form textarea:focus {
  outline: 0;
  border-color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-form .pb-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-form small {
  color: var(--pb-muted);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-warning {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: #fff1f0;
  border: 1px solid #ef8c84;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-warning strong {
  font-weight: 400;
  color: #b3261e;
  font-size: 1.1rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-warning a {
  color: #b3261e;
  text-decoration: underline;
}

/* works */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 260px;
  gap: clamp(10px, 1.4vw, 18px);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-work {
  position: relative;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-work img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-work:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.38) 100%);
  pointer-events: none;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-work figcaption {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 16px;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-work--tall {
  grid-row: span 2;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-work--wide {
  grid-column: span 2;
}

/* pricing */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing {
  position: relative;
  padding: clamp(56px, 7vw, 110px) var(--pb-gutter);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing figure {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.39) 45%, rgba(0, 0, 0, 0.18) 100%);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing h3 {
  color: #fff;
  max-width: 14ch;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing em {
  color: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__copy > p:not(.pb-eyebrow) {
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.85);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__steps li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__steps li:hover {
  background: var(--pb-lime);
  border-color: var(--pb-lime);
  color: var(--pb-ink);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__steps b {
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--pb-lime);
  transition: color 0.25s ease;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__steps li:hover b {
  color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__steps h4 {
  font-size: 1.3rem !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__steps p {
  margin-top: 4px;
  font-size: 0.92rem;
  opacity: 0.85;
}

/* reviews */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews {
  background: var(--pb-cream);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews article {
  display: grid;
  gap: 1rem;
  align-content: space-between;
  min-height: 320px !important;
  padding: 28px;
  background: #fff;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews article.is-blue {
  background: var(--pb-navy);
  color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-quote-mark {
  color: var(--pb-lime);
  font-size: 5rem;
  line-height: 0.6;
  height: 36px;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews article:not(.is-blue) .pb-quote-mark {
  color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews article > p {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews small {
  font-family: var(--pb-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews figure {
  min-height: 320px;
  border-radius: 16px !important;
}

/* area */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-area {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-area__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-zip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  max-width: 32rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-zip input {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--pb-line);
  border-radius: 999px !important;
  font-size: 0.95rem;
  color: var(--pb-ink);
  background: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-zip input:focus {
  outline: 0;
  border-color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-zip small {
  grid-column: 1/-1;
  color: var(--pb-ink);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-area figure {
  aspect-ratio: 4/3;
  border-radius: 16px !important;
}

/* final */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-final {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  padding: clamp(60px, 8vw, 120px) var(--pb-gutter);
  background: var(--pb-lime);
  text-align: center;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-final h3 {
  font-size: clamp(2.6rem, 7vw, 6rem) !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-final em {
  color: var(--pb-navy);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-final > p:not(.pb-eyebrow) {
  max-width: 28rem;
}

/* footer */
.demo-hub-page .demo-site--northsideplumbing .pb .pb-footer {
  padding: clamp(48px, 6vw, 80px) var(--pb-gutter) 24px;
  background: var(--pb-navy-2);
  color: #fff;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-footer h4 {
  margin-bottom: 0.4rem;
  color: var(--pb-lime);
  font-family: var(--pb-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-footer p,
.demo-hub-page .demo-site--northsideplumbing .pb .pb-footer a:not(.pb-brand) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-footer a:not(.pb-brand):hover {
  color: var(--pb-lime);
}

.demo-hub-page .demo-site--northsideplumbing .pb .pb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.85rem !important;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-nav,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-call {
    display: none;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-bottom: 150px;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-stats > div:nth-child(3) {
    border-left: 0;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-stats > div:nth-child(n+3) {
    border-top: 1px solid var(--pb-line);
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-about__copy {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-card__body {
    max-height: 220px;
    opacity: 1;
    padding-top: 6px;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-emergency,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-request,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-area,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-pricing__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-works__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-work--wide {
    grid-column: span 2;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-reviews__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-head {
    flex-direction: column;
    align-items: flex-start;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-header .pb-btn {
    display: none;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-hero__actions .pb-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-cards,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-works__grid,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-footer__grid,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-form__row,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-zip {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-card {
    min-height: 420px !important;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-work--tall,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-work--wide {
    grid-column: auto;
    grid-row: auto;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-about {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-about figure {
    aspect-ratio: 4/3;
  }
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-about__a,
  .demo-hub-page .demo-site--northsideplumbing .pb .pb-about__b {
    align-self: stretch;
  }}
/* ============================================================
   Harbor Street Auto (auto) demo - redesigned layout.
   Fusion of three references: oversized headline on soft grey with notched
   photo cards and red accent, dark premium service grid, and a clean
   "why we stand out" feature list. Scoped to .demo-site--harborstreet.
   ============================================================ */
.demo-hub-page .demo-site--harborstreet {
  --au-red: #d6212b;
  --au-red-2: #b51a23;
  --au-ink: #0f0f10;
  --au-ink-2: #1a1a1c;
  --au-gray: #efeeec;
  --au-muted: #66676b;
  --au-line: #dcdad6;
  --au-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --au-mono: Inter, Arial, sans-serif;
  --au-gutter: max(20px, calc((100% - 1240px) / 2));
  background: #fff !important;
  color: var(--au-ink);
}

.demo-hub-page .demo-site--harborstreet .au {
  position: relative;
  background: #fff;
  color: var(--au-ink);
  font-family: var(--au-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--harborstreet .au * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--harborstreet .au [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--harborstreet .au img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--harborstreet .au figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--harborstreet .au p {
  margin: 0;
}

.demo-hub-page .demo-site--harborstreet .au a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--harborstreet .au article,
.demo-hub-page .demo-site--harborstreet .au form,
.demo-hub-page .demo-site--harborstreet .au aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--harborstreet .au ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--harborstreet .au h2,
.demo-hub-page .demo-site--harborstreet .au h3,
.demo-hub-page .demo-site--harborstreet .au h4 {
  margin: 0;
  max-width: none;
  font-family: var(--au-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  color: inherit;
}

.demo-hub-page .demo-site--harborstreet .au h2 {
  font-size: clamp(2.6rem, 5.6vw, 5rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.98 !important;
}

.demo-hub-page .demo-site--harborstreet .au h3 {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
}

.demo-hub-page .demo-site--harborstreet .au h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--harborstreet .au em {
  font-style: normal;
  font-family: var(--au-mono);
  letter-spacing: -0.06em;
  color: var(--au-red);
  font-size: 0.92em;
}

.demo-hub-page .demo-site--harborstreet .au .au-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--au-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--harborstreet .au .au-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--au-red);
}

.demo-hub-page .demo-site--harborstreet .au .au-eyebrow--light {
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-text {
  color: var(--au-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-family: var(--au-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--harborstreet .au .au-btn--red {
  background: var(--au-red);
  border-color: var(--au-red);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-btn--red:hover {
  background: var(--au-ink);
  border-color: var(--au-ink);
}

.demo-hub-page .demo-site--harborstreet .au .au-btn--black {
  background: var(--au-ink);
  border-color: var(--au-ink);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-btn--black:hover {
  background: var(--au-red);
  border-color: var(--au-red);
}

.demo-hub-page .demo-site--harborstreet .au .au-btn--outline {
  border-color: var(--au-ink);
  color: var(--au-ink);
}

.demo-hub-page .demo-site--harborstreet .au .au-btn--outline:hover {
  background: var(--au-ink);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--au-ink);
}

.demo-hub-page .demo-site--harborstreet .au .au-btn--white:hover {
  background: var(--au-red);
  border-color: var(--au-red);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-sec {
  padding: clamp(60px, 8vw, 120px) var(--au-gutter);
}

.demo-hub-page .demo-site--harborstreet .au .au-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--harborstreet .au .au-head > div {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-head > p:not(.au-eyebrow) {
  max-width: 24rem;
  color: var(--au-muted);
}

.demo-hub-page .demo-site--harborstreet .au .au-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* header */
.demo-hub-page .demo-site--harborstreet .au .au-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px var(--au-gutter);
  background: var(--au-gray);
}

.demo-hub-page .demo-site--harborstreet .au .au-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--harborstreet .au .au-brand b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px 8px 8px 0;
  background: var(--au-red);
  color: #fff;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--harborstreet .au .au-brand span {
  display: grid;
  font-size: 1.25rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.demo-hub-page .demo-site--harborstreet .au .au-brand small {
  margin-top: 3px;
  font-family: var(--au-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--au-muted);
}

.demo-hub-page .demo-site--harborstreet .au .au-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-brand--light small {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--harborstreet .au .au-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.demo-hub-page .demo-site--harborstreet .au .au-nav a {
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--harborstreet .au .au-nav a:hover {
  background: var(--au-ink);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.demo-hub-page .demo-site--harborstreet .au .au-call {
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-call:hover {
  color: var(--au-red);
}

/* hero */
.demo-hub-page .demo-site--harborstreet .au .au-hero {
  padding: clamp(36px, 5vw, 72px) var(--au-gutter) clamp(36px, 5vw, 64px);
  background: var(--au-gray);
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__side {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__side > p:not(.au-eyebrow) {
  color: var(--au-muted);
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.7fr);
  gap: 14px;
  min-height: 440px;
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__grid > article {
  position: relative;
  min-height: 440px !important;
  overflow: hidden;
  border-radius: 22px !important;
  isolation: isolate;
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__grid figure {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__main figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__main img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__main:hover img,
.demo-hub-page .demo-site--harborstreet .au .au-hero__tile:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--harborstreet .au .au-hero__tile img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--harborstreet .au .au-glass {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  max-width: 420px;
  background: rgba(30, 30, 32, 0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-glass span {
  font-family: var(--au-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.demo-hub-page .demo-site--harborstreet .au .au-glass strong {
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--harborstreet .au .au-glass > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.demo-hub-page .demo-site--harborstreet .au .au-glass button {
  padding: 9px 16px;
  border: 0;
  border-radius: 999px !important;
  background: #fff;
  color: var(--au-ink);
  font-family: var(--au-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--harborstreet .au .au-glass button:hover {
  background: var(--au-red);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-tag {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  background: #fff;
  border-radius: 16px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.demo-hub-page .demo-site--harborstreet .au .au-tag small {
  display: block;
  margin-top: 3px;
  font-family: var(--au-display);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--au-muted);
}

.demo-hub-page .demo-site--harborstreet .au .au-tag i {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--au-red);
  color: #fff;
  font-style: normal;
  transition: background-color 0.2s ease;
}

.demo-hub-page .demo-site--harborstreet .au .au-tag:hover i {
  background: var(--au-ink);
}

/* principles */
.demo-hub-page .demo-site--harborstreet .au .au-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--au-ink);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-principles span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 12px;
  font-family: var(--au-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.demo-hub-page .demo-site--harborstreet .au .au-principles span::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--au-red);
  flex: none;
}

.demo-hub-page .demo-site--harborstreet .au .au-principles span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* why */
.demo-hub-page .demo-site--harborstreet .au .au-why {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
}

.demo-hub-page .demo-site--harborstreet .au .au-why__top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__copy {
  display: grid;
  gap: 1.2rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__copy p {
  color: var(--au-muted);
  max-width: 26rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__list li {
  display: grid;
  gap: 6px;
  align-content: start;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__list i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border: 1px solid var(--au-line);
  border-radius: 12px;
  color: var(--au-red);
  font-style: normal;
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__list b {
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__list span {
  color: var(--au-muted);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__photos figure {
  border-radius: 22px !important;
  aspect-ratio: 4/3.4;
}

.demo-hub-page .demo-site--harborstreet .au .au-why__photos figure:nth-child(2) {
  aspect-ratio: 4/4.6;
  margin-top: 36px;
}

/* services */
.demo-hub-page .demo-site--harborstreet .au .au-services {
  background: var(--au-ink);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-services h3 {
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-services .au-head > p:not(.au-eyebrow) {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--harborstreet .au .au-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--harborstreet .au .au-service {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 380px !important;
  overflow: hidden;
  border-radius: 20px !important;
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--harborstreet .au .au-service--large {
  grid-column: span 2;
}

.demo-hub-page .demo-site--harborstreet .au .au-service figure {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.demo-hub-page .demo-site--harborstreet .au .au-service figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.88) 100%);
}

.demo-hub-page .demo-site--harborstreet .au .au-service img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--harborstreet .au .au-service:hover img {
  transform: scale(1.06);
}

.demo-hub-page .demo-site--harborstreet .au .au-service > div {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 22px;
}

.demo-hub-page .demo-site--harborstreet .au .au-service span {
  font-family: var(--au-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--au-red);
  background: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}

.demo-hub-page .demo-site--harborstreet .au .au-service h4 {
  color: #fff;
  font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
}

.demo-hub-page .demo-site--harborstreet .au .au-service .au-btn {
  margin-top: 6px;
  min-height: 42px;
}

/* difference */
.demo-hub-page .demo-site--harborstreet .au .au-difference {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  background: var(--au-gray);
}

.demo-hub-page .demo-site--harborstreet .au .au-difference__copy {
  display: grid;
  gap: 1.2rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-explain {
  display: grid;
  border-top: 1px solid var(--au-line);
  margin-top: 0.4rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-explain li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--au-line);
}

.demo-hub-page .demo-site--harborstreet .au .au-explain span {
  font-family: var(--au-mono);
  font-size: 0.8rem;
  color: var(--au-red);
  padding-top: 5px;
}

.demo-hub-page .demo-site--harborstreet .au .au-explain b {
  display: block;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--harborstreet .au .au-explain small {
  color: var(--au-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-difference__photos {
  display: grid;
  gap: 14px;
}

.demo-hub-page .demo-site--harborstreet .au .au-difference__photos figure {
  border-radius: 22px !important;
  aspect-ratio: 4/3;
}

.demo-hub-page .demo-site--harborstreet .au .au-difference__photos figure:last-child {
  width: 60%;
  justify-self: end;
  aspect-ratio: 1;
}

/* appointment */
.demo-hub-page .demo-site--harborstreet .au .au-appointment {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.demo-hub-page .demo-site--harborstreet .au .au-appointment__intro {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--harborstreet .au .au-appointment__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.8rem;
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--harborstreet .au .au-form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  background: var(--au-gray);
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--harborstreet .au .au-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-hub-page .demo-site--harborstreet .au .au-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--au-muted);
}

.demo-hub-page .demo-site--harborstreet .au .au-form input,
.demo-hub-page .demo-site--harborstreet .au .au-form select,
.demo-hub-page .demo-site--harborstreet .au .au-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px !important;
  background: #fff;
  color: var(--au-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-form textarea {
  resize: vertical;
  min-height: 110px;
}

.demo-hub-page .demo-site--harborstreet .au .au-form input:focus,
.demo-hub-page .demo-site--harborstreet .au .au-form select:focus,
.demo-hub-page .demo-site--harborstreet .au .au-form textarea:focus {
  outline: 0;
  border-color: var(--au-red);
}

.demo-hub-page .demo-site--harborstreet .au .au-form .au-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--harborstreet .au .au-result {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: var(--au-ink);
  color: #fff;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--harborstreet .au .au-result strong {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--au-red);
}

.demo-hub-page .demo-site--harborstreet .au .au-result p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

/* reviews */
.demo-hub-page .demo-site--harborstreet .au .au-reviews {
  background: var(--au-gray);
}

.demo-hub-page .demo-site--harborstreet .au .au-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--harborstreet .au .au-reviews article {
  display: grid;
  gap: 1rem;
  align-content: space-between;
  min-height: 320px !important;
  padding: 28px;
  background: #fff;
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--harborstreet .au .au-reviews article.is-dark {
  background: var(--au-ink);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-stars {
  color: var(--au-red);
  letter-spacing: 0.18em;
}

.demo-hub-page .demo-site--harborstreet .au .au-reviews article > p {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--harborstreet .au .au-reviews small {
  font-family: var(--au-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.demo-hub-page .demo-site--harborstreet .au .au-reviews figure {
  min-height: 320px;
  border-radius: 22px !important;
}

/* process */
.demo-hub-page .demo-site--harborstreet .au .au-process {
  background: var(--au-ink);
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-process h3 {
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--harborstreet .au .au-steps article {
  display: grid;
  gap: 14px;
  align-content: space-between;
  min-height: 260px !important;
  padding: 24px;
  background: var(--au-ink-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px !important;
  transition: background-color 0.25s ease;
}

.demo-hub-page .demo-site--harborstreet .au .au-steps article:hover {
  background: var(--au-red-2);
}

.demo-hub-page .demo-site--harborstreet .au .au-steps article.is-red {
  background: var(--au-red);
}

.demo-hub-page .demo-site--harborstreet .au .au-steps b {
  font-weight: 400;
  font-size: 3rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--au-red);
}

.demo-hub-page .demo-site--harborstreet .au .au-steps article.is-red b,
.demo-hub-page .demo-site--harborstreet .au .au-steps article:hover b {
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-steps p {
  margin-top: 8px;
  font-size: 0.92rem;
  opacity: 0.8;
}

/* final */
.demo-hub-page .demo-site--harborstreet .au .au-final {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 560px;
  padding: clamp(40px, 6vw, 90px) var(--au-gutter);
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--harborstreet .au .au-final figure {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.demo-hub-page .demo-site--harborstreet .au .au-final figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.35));
}

.demo-hub-page .demo-site--harborstreet .au .au-final > div {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: 40rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-final h3 {
  color: #fff;
}

/* footer */
.demo-hub-page .demo-site--harborstreet .au .au-footer {
  padding: clamp(48px, 6vw, 80px) var(--au-gutter) 24px;
  background: #070708;
  color: #fff;
}

.demo-hub-page .demo-site--harborstreet .au .au-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--harborstreet .au .au-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--harborstreet .au .au-footer h4 {
  margin-bottom: 0.4rem;
  color: var(--au-red);
  font-family: var(--au-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--harborstreet .au .au-footer p,
.demo-hub-page .demo-site--harborstreet .au .au-footer a:not(.au-brand) {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--harborstreet .au .au-footer a:not(.au-brand):hover {
  color: var(--au-red);
}

.demo-hub-page .demo-site--harborstreet .au .au-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.85rem !important;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--harborstreet .au .au-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-nav,
  .demo-hub-page .demo-site--harborstreet .au .au-call {
    display: none;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-hero__head,
  .demo-hub-page .demo-site--harborstreet .au .au-why__top,
  .demo-hub-page .demo-site--harborstreet .au .au-difference,
  .demo-hub-page .demo-site--harborstreet .au .au-appointment {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--harborstreet .au .au-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--harborstreet .au .au-hero__main {
    grid-column: 1/-1;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-hero__grid > article {
    min-height: 320px !important;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-hero__main {
    min-height: 400px !important;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--harborstreet .au .au-principles span:nth-child(3) {
    border-left: 0;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-principles span:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .demo-hub-page .demo-site--harborstreet .au .au-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--harborstreet .au .au-service--large {
    grid-column: 1/-1;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-reviews__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--harborstreet .au .au-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--harborstreet .au .au-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--harborstreet .au .au-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-head--center {
    align-items: center;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--harborstreet .au .au-header .au-btn {
    display: none;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-hero__actions .au-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-hero__grid,
  .demo-hub-page .demo-site--harborstreet .au .au-service-grid,
  .demo-hub-page .demo-site--harborstreet .au .au-steps,
  .demo-hub-page .demo-site--harborstreet .au .au-footer__grid,
  .demo-hub-page .demo-site--harborstreet .au .au-form__row,
  .demo-hub-page .demo-site--harborstreet .au .au-why__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--harborstreet .au .au-hero__grid > article {
    min-height: 300px !important;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-why__photos {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--harborstreet .au .au-why__photos figure:nth-child(2) {
    margin-top: 0;
    aspect-ratio: 4/3.4;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-steps article {
    min-height: 0 !important;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-difference__photos figure:last-child {
    width: 100%;
  }
  .demo-hub-page .demo-site--harborstreet .au .au-principles {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--harborstreet .au .au-principles span + span {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }}
/* ============================================================
   Good Dog Grooming (grooming) demo - redesigned layout.
   Fusion of six references: playful pastel shapes and dog-photo bubbles on a
   lime hero, a paw ticker, colour-block service cards, stat tiles and tilted
   polaroid gallery. Scoped to .demo-site--gooddog so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--gooddog {
  --gg-green: #0d3b2e;
  --gg-pink: #e8468a;
  --gg-pink-soft: #fbd0dc;
  --gg-lime: #e3ee8f;
  --gg-mint: #d9f6ea;
  --gg-yellow: #f7c242;
  --gg-cream: #fffbec;
  --gg-ink: #0d3b2e;
  --gg-muted: #587064;
  --gg-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --gg-mono: Inter, Arial, sans-serif;
  --gg-gutter: max(20px, calc((100% - 1240px) / 2));
  background: var(--gg-cream) !important;
  color: var(--gg-ink);
}

.demo-hub-page .demo-site--gooddog .gg {
  position: relative;
  background: var(--gg-cream);
  color: var(--gg-ink);
  font-family: var(--gg-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--gooddog .gg * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--gooddog .gg [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--gooddog .gg img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--gooddog .gg figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--gooddog .gg p {
  margin: 0;
}

.demo-hub-page .demo-site--gooddog .gg a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--gooddog .gg article,
.demo-hub-page .demo-site--gooddog .gg form,
.demo-hub-page .demo-site--gooddog .gg aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--gooddog .gg h2,
.demo-hub-page .demo-site--gooddog .gg h3,
.demo-hub-page .demo-site--gooddog .gg h4 {
  margin: 0;
  max-width: none;
  font-family: var(--gg-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.04em !important;
  line-height: 0.96 !important;
  color: inherit;
}

.demo-hub-page .demo-site--gooddog .gg h2 {
  font-size: clamp(2.8rem, 7vw, 6.4rem) !important;
  letter-spacing: -0.055em !important;
}

.demo-hub-page .demo-site--gooddog .gg h3 {
  font-size: clamp(2.1rem, 4.6vw, 4.2rem) !important;
}

.demo-hub-page .demo-site--gooddog .gg h4 {
  font-size: 1.5rem !important;
  letter-spacing: -0.03em !important;
}

.demo-hub-page .demo-site--gooddog .gg em {
  font-style: normal;
  font-family: var(--gg-mono);
  letter-spacing: -0.06em;
  color: var(--gg-pink);
  font-size: 0.88em;
  text-transform: none;
}

.demo-hub-page .demo-site--gooddog .gg .gg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gg-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--gooddog .gg .gg-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gg-pink);
}

.demo-hub-page .demo-site--gooddog .gg .gg-eyebrow--light {
  color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-text {
  color: var(--gg-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.8rem;
  border: 2px solid transparent;
  border-radius: 999px !important;
  font-family: var(--gg-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn:hover {
  transform: translateY(-2px);
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn--pink {
  background: var(--gg-pink);
  border-color: var(--gg-pink);
  color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn--pink:hover {
  background: var(--gg-green);
  border-color: var(--gg-green);
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn--green {
  background: var(--gg-green);
  border-color: var(--gg-green);
  color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn--green:hover {
  background: var(--gg-pink);
  border-color: var(--gg-pink);
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn--outline {
  border-color: var(--gg-green);
  color: var(--gg-green);
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn--outline:hover {
  background: var(--gg-green);
  color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn--lime {
  background: var(--gg-lime);
  border-color: var(--gg-lime);
  color: var(--gg-green);
}

.demo-hub-page .demo-site--gooddog .gg .gg-btn--lime:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-sec {
  padding: clamp(60px, 8vw, 120px) var(--gg-gutter);
}

.demo-hub-page .demo-site--gooddog .gg .gg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--gooddog .gg .gg-head > p {
  max-width: 24rem;
  color: var(--gg-muted);
}

.demo-hub-page .demo-site--gooddog .gg .gg-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* header */
.demo-hub-page .demo-site--gooddog .gg .gg-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px var(--gg-gutter);
  background: var(--gg-lime);
}

.demo-hub-page .demo-site--gooddog .gg .gg-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-brand b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gg-green);
  font-weight: 400;
  font-size: 1.1rem;
}

.demo-hub-page .demo-site--gooddog .gg .gg-brand span {
  display: grid;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--gooddog .gg .gg-brand small {
  margin-top: 3px;
  font-family: var(--gg-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: var(--gg-muted);
}

.demo-hub-page .demo-site--gooddog .gg .gg-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-brand--light b {
  background: var(--gg-lime);
}

.demo-hub-page .demo-site--gooddog .gg .gg-brand--light small {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--gooddog .gg .gg-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--gooddog .gg .gg-nav a {
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--gooddog .gg .gg-nav a:hover {
  color: var(--gg-pink);
}

/* hero */
.demo-hub-page .demo-site--gooddog .gg .gg-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 700px;
  padding: clamp(48px, 6vw, 90px) var(--gg-gutter) clamp(120px, 12vw, 190px);
  background: var(--gg-lime);
  border-radius: 0 0 50% 50%/0 0 150px 150px;
  overflow: hidden;
  text-align: center;
}

.demo-hub-page .demo-site--gooddog .gg .gg-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  max-width: 54rem;
}

.demo-hub-page .demo-site--gooddog .gg .gg-hero h2 em {
  color: var(--gg-pink);
  text-transform: none;
}

.demo-hub-page .demo-site--gooddog .gg .gg-hero__sub {
  max-width: 32rem;
  font-size: 1.05rem;
  color: var(--gg-green);
}

.demo-hub-page .demo-site--gooddog .gg .gg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.demo-hub-page .demo-site--gooddog .gg .gg-bubble {
  position: absolute;
  z-index: 1;
  border: 6px solid #fff;
  border-radius: 50% !important;
  box-shadow: 0 14px 34px rgba(13, 59, 46, 0.18);
}

.demo-hub-page .demo-site--gooddog .gg .gg-bubble--a {
  right: 5%;
  top: 8%;
  width: clamp(110px, 14vw, 200px);
  aspect-ratio: 1;
}

.demo-hub-page .demo-site--gooddog .gg .gg-bubble--b {
  left: 4%;
  bottom: 20%;
  width: clamp(90px, 11vw, 160px);
  aspect-ratio: 1;
}

.demo-hub-page .demo-site--gooddog .gg .gg-note {
  position: absolute;
  z-index: 2;
  left: 4%;
  top: 9%;
  display: grid;
  gap: 4px;
  width: 220px;
  padding: 16px 18px;
  background: #fff;
  border-radius: 14px !important;
  text-align: left;
  box-shadow: 0 10px 28px rgba(13, 59, 46, 0.14);
}

.demo-hub-page .demo-site--gooddog .gg .gg-note b {
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--gooddog .gg .gg-note span {
  color: var(--gg-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* ticker */
.demo-hub-page .demo-site--gooddog .gg .gg-ticker {
  margin-top: -26px;
  overflow: hidden;
  background: var(--gg-yellow);
  border-block: 2px solid var(--gg-green);
  position: relative;
  z-index: 3;
  transform: rotate(-1.2deg);
}

.demo-hub-page .demo-site--gooddog .gg .gg-ticker > div {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: gg-ticker 24s linear infinite;
}

.demo-hub-page .demo-site--gooddog .gg .gg-ticker span {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--gooddog .gg .gg-ticker span::after {
  content: "🐾";
  font-size: 0.9em;
}@media (prefers-reduced-motion: reduce) {
  .demo-hub-page .demo-site--gooddog .gg .gg-ticker > div {
    animation: none;
  }}
/* about */
.demo-hub-page .demo-site--gooddog .gg .gg-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}

.demo-hub-page .demo-site--gooddog .gg .gg-shapes {
  position: relative;
  min-height: 440px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-shape {
  position: absolute;
  display: block;
  overflow: hidden;
}

.demo-hub-page .demo-site--gooddog .gg .gg-shape--arch {
  left: 4%;
  top: 0;
  width: 46%;
  height: 62%;
  border-radius: 999px 999px 0 0 !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-shape--pink {
  left: 52%;
  top: 12%;
  width: 38%;
  height: 30%;
  background: var(--gg-pink-soft);
  border-radius: 0 999px 999px 0;
}

.demo-hub-page .demo-site--gooddog .gg .gg-shape--circle {
  left: 8%;
  bottom: 0;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50% 50% 50% 0 !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-shape--mint {
  left: 54%;
  bottom: 4%;
  width: 36%;
  height: 46%;
  background: var(--gg-mint);
  border-radius: 999px 999px 0 0;
}

.demo-hub-page .demo-site--gooddog .gg .gg-shape--ring {
  left: 40%;
  bottom: 36%;
  width: 70px;
  height: 70px;
  border: 16px solid var(--gg-yellow);
  border-radius: 50%;
  background: transparent;
}

.demo-hub-page .demo-site--gooddog .gg .gg-about__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}

/* stats */
.demo-hub-page .demo-site--gooddog .gg .gg-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 var(--gg-gutter);
}

.demo-hub-page .demo-site--gooddog .gg .gg-stats > div {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  background: #fff;
  border-radius: 20px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-stats > div:nth-child(2) {
  background: var(--gg-pink-soft);
}

.demo-hub-page .demo-site--gooddog .gg .gg-stats > div:nth-child(3) {
  background: var(--gg-mint);
}

.demo-hub-page .demo-site--gooddog .gg .gg-stats > div:nth-child(4) {
  background: var(--gg-yellow);
}

.demo-hub-page .demo-site--gooddog .gg .gg-stats b {
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--gg-pink);
}

.demo-hub-page .demo-site--gooddog .gg .gg-stats > div:nth-child(4) b {
  color: var(--gg-green);
}

.demo-hub-page .demo-site--gooddog .gg .gg-stats span {
  font-size: 0.85rem;
  color: var(--gg-green);
}

/* services */
.demo-hub-page .demo-site--gooddog .gg .gg-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}

.demo-hub-page .demo-site--gooddog .gg .gg-card {
  display: grid;
  grid-template-rows: 340px auto;
  overflow: hidden;
  border-radius: 22px !important;
  background: var(--gg-pink-soft);
  transition: transform 0.3s ease;
}

.demo-hub-page .demo-site--gooddog .gg .gg-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
}

.demo-hub-page .demo-site--gooddog .gg .gg-card--lime {
  background: var(--gg-lime);
}

.demo-hub-page .demo-site--gooddog .gg .gg-card--yellow {
  background: var(--gg-yellow);
}

.demo-hub-page .demo-site--gooddog .gg .gg-card figure {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-card > div {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 22px 24px 26px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-card span {
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--gg-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--gooddog .gg .gg-card p {
  color: var(--gg-green);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--gooddog .gg .gg-card .gg-btn {
  margin-top: 6px;
}

/* pricing */
.demo-hub-page .demo-site--gooddog .gg .gg-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  background: var(--gg-mint);
}

.demo-hub-page .demo-site--gooddog .gg .gg-pricing__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
}

.demo-hub-page .demo-site--gooddog .gg .gg-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.demo-hub-page .demo-site--gooddog .gg .gg-prices article {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: #fff;
  border-radius: 18px !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-prices article.is-pink {
  background: var(--gg-pink);
  color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-prices strong {
  font-weight: 400;
  font-family: var(--gg-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--gooddog .gg .gg-prices b {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--gooddog .gg .gg-pricing__img {
  aspect-ratio: 4/5;
  border-radius: 999px 999px 24px 24px !important;
}

/* experience */
.demo-hub-page .demo-site--gooddog .gg .gg-experience {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--gooddog .gg .gg-experience__a {
  aspect-ratio: 4/4.4;
  border-radius: 24px 24px 24px 200px !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-experience__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
}

.demo-hub-page .demo-site--gooddog .gg .gg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-tags b {
  padding: 10px 18px;
  border: 2px solid var(--gg-green);
  border-radius: 999px;
  background: var(--gg-yellow);
  font-weight: 400;
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.demo-hub-page .demo-site--gooddog .gg .gg-tags b:nth-child(2n) {
  background: var(--gg-pink-soft);
  transform: rotate(-3deg);
}

.demo-hub-page .demo-site--gooddog .gg .gg-tags b:nth-child(3n) {
  background: var(--gg-mint);
  transform: rotate(2deg);
}

.demo-hub-page .demo-site--gooddog .gg .gg-tags b:hover {
  transform: rotate(0) scale(1.06);
}

.demo-hub-page .demo-site--gooddog .gg .gg-strong {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  max-width: 26rem;
}

/* book */
.demo-hub-page .demo-site--gooddog .gg .gg-book {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  background: var(--gg-pink-soft);
}

.demo-hub-page .demo-site--gooddog .gg .gg-book__intro {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--gooddog .gg .gg-book__intro figure {
  aspect-ratio: 4/3.2;
  margin-top: 0.8rem;
  border-radius: 200px 200px 24px 24px !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border-radius: 24px !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--gg-muted);
}

.demo-hub-page .demo-site--gooddog .gg .gg-form input,
.demo-hub-page .demo-site--gooddog .gg .gg-form select,
.demo-hub-page .demo-site--gooddog .gg .gg-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid #ecefe6;
  border-radius: 14px !important;
  background: #fbfcf7;
  color: var(--gg-green);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--gooddog .gg .gg-form textarea {
  resize: vertical;
  min-height: 110px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-form input:focus,
.demo-hub-page .demo-site--gooddog .gg .gg-form select:focus,
.demo-hub-page .demo-site--gooddog .gg .gg-form textarea:focus {
  outline: 0;
  border-color: var(--gg-pink);
}

.demo-hub-page .demo-site--gooddog .gg .gg-form .gg-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--gooddog .gg .gg-result {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: var(--gg-green);
  color: #fff;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-result strong {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--gg-lime);
}

.demo-hub-page .demo-site--gooddog .gg .gg-result p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

/* gallery */
.demo-hub-page .demo-site--gooddog .gg .gg-polaroids {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  padding-bottom: 20px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids figure {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 12px 12px 16px;
  border-radius: 10px !important;
  background: var(--gg-pink-soft);
  transition: transform 0.3s ease;
  overflow: visible;
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids figure.is-lime {
  background: var(--gg-lime);
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids figure.is-mint {
  background: var(--gg-mint);
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids figure.is-yellow {
  background: var(--gg-yellow);
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids figure:nth-child(odd) {
  transform: rotate(-3deg);
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids figure:nth-child(even) {
  transform: rotate(2.4deg) translateY(18px);
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids figure:hover {
  transform: rotate(0) scale(1.03);
  z-index: 2;
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids img {
  aspect-ratio: 1;
  height: auto;
  border-radius: 6px;
}

.demo-hub-page .demo-site--gooddog .gg .gg-polaroids figcaption {
  font-family: var(--gg-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* final */
.demo-hub-page .demo-site--gooddog .gg .gg-final {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(60px, 8vw, 110px) var(--gg-gutter);
  background: var(--gg-pink);
  color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-final__dog {
  width: min(100%, 360px);
  aspect-ratio: 1;
  justify-self: center;
  border: 8px solid #fff;
  border-radius: 50% !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-final__copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}

.demo-hub-page .demo-site--gooddog .gg .gg-final h3 {
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 5.4rem) !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-final em {
  color: var(--gg-lime);
}

/* footer */
.demo-hub-page .demo-site--gooddog .gg .gg-footer {
  padding: clamp(48px, 6vw, 80px) var(--gg-gutter) 24px;
  background: var(--gg-green);
  color: #fff;
}

.demo-hub-page .demo-site--gooddog .gg .gg-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--gooddog .gg .gg-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--gooddog .gg .gg-footer h4 {
  margin-bottom: 0.4rem;
  color: var(--gg-lime);
  font-family: var(--gg-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
}

.demo-hub-page .demo-site--gooddog .gg .gg-footer p,
.demo-hub-page .demo-site--gooddog .gg .gg-footer a:not(.gg-brand) {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--gooddog .gg .gg-footer a:not(.gg-brand):hover {
  color: var(--gg-lime);
}

.demo-hub-page .demo-site--gooddog .gg .gg-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.85rem !important;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--gooddog .gg .gg-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-nav {
    display: none;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-note {
    display: none;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-hero {
    min-height: 600px;
    border-radius: 0 0 50% 50%/0 0 90px 90px;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-about,
  .demo-hub-page .demo-site--gooddog .gg .gg-pricing,
  .demo-hub-page .demo-site--gooddog .gg .gg-experience,
  .demo-hub-page .demo-site--gooddog .gg .gg-book,
  .demo-hub-page .demo-site--gooddog .gg .gg-final {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-shapes {
    min-height: 380px;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-polaroids {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-head--center {
    align-items: center;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--gooddog .gg .gg-header .gg-btn {
    display: none;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-hero {
    padding-top: 120px;
    padding-bottom: 150px;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-bubble--a {
    top: 3%;
    right: 4%;
    width: 90px;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-bubble--b {
    bottom: 8%;
    left: 4%;
    width: 80px;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-hero__actions .gg-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-prices,
  .demo-hub-page .demo-site--gooddog .gg .gg-form__row,
  .demo-hub-page .demo-site--gooddog .gg .gg-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--gooddog .gg .gg-polaroids figure:nth-child(even) {
    transform: rotate(2.4deg);
  }}
/* ============================================================
   Marlow Studio (salon) demo - redesigned layout.
   Fusion of seven references: a full-bleed portrait hero with glass cards,
   a terracotta marquee, "why us" cards around a ring, a photo-led service
   grid, warm editorial blocks and a full-bleed closing image.
   Scoped to .demo-site--marlow so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--marlow {
  --sl-cream: #f6f1ea;
  --sl-sand: #ebe0d3;
  --sl-terra: #c8693f;
  --sl-terra-2: #a9532f;
  --sl-brown: #35211a;
  --sl-pink: #f1d9d0;
  --sl-lilac: #dcd6e6;
  --sl-ink: #2a1b16;
  --sl-muted: #7a6a60;
  --sl-line: #ddd0c2;
  --sl-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --sl-mono: Inter, Arial, sans-serif;
  --sl-gutter: max(20px, calc((100% - 1240px) / 2));
  background: var(--sl-cream) !important;
  color: var(--sl-ink);
}

.demo-hub-page .demo-site--marlow .sl {
  position: relative;
  background: var(--sl-cream);
  color: var(--sl-ink);
  font-family: var(--sl-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--marlow .sl * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--marlow .sl [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--marlow .sl img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--marlow .sl figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--marlow .sl p {
  margin: 0;
}

.demo-hub-page .demo-site--marlow .sl a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--marlow .sl article,
.demo-hub-page .demo-site--marlow .sl form,
.demo-hub-page .demo-site--marlow .sl aside,
.demo-hub-page .demo-site--marlow .sl blockquote {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--marlow .sl h2,
.demo-hub-page .demo-site--marlow .sl h3,
.demo-hub-page .demo-site--marlow .sl h4 {
  margin: 0;
  max-width: none;
  font-family: var(--sl-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: inherit;
}

.demo-hub-page .demo-site--marlow .sl h2 {
  font-size: clamp(2.8rem, 6.4vw, 5.8rem) !important;
  letter-spacing: -0.055em !important;
  line-height: 0.95 !important;
}

.demo-hub-page .demo-site--marlow .sl h3 {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
}

.demo-hub-page .demo-site--marlow .sl h4 {
  font-size: 1.4rem !important;
  letter-spacing: -0.025em !important;
}

.demo-hub-page .demo-site--marlow .sl em {
  font-style: normal;
  font-family: var(--sl-mono);
  letter-spacing: -0.06em;
  color: var(--sl-terra);
  font-size: 0.9em;
}

.demo-hub-page .demo-site--marlow .sl .sl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sl-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--marlow .sl .sl-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-eyebrow--light {
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-eyebrow--light::before {
  background: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-text {
  color: var(--sl-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-family: var(--sl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--marlow .sl .sl-btn--dark {
  background: var(--sl-brown);
  border-color: var(--sl-brown);
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-btn--dark:hover {
  background: var(--sl-terra);
  border-color: var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--sl-ink);
}

.demo-hub-page .demo-site--marlow .sl .sl-btn--white:hover {
  background: var(--sl-terra);
  border-color: var(--sl-terra);
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-btn--glass {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  backdrop-filter: blur(10px);
}

.demo-hub-page .demo-site--marlow .sl .sl-btn--glass:hover {
  background: #fff;
  color: var(--sl-ink);
}

.demo-hub-page .demo-site--marlow .sl .sl-btn--outline {
  background: transparent;
  border-color: var(--sl-brown);
  color: var(--sl-brown);
}

.demo-hub-page .demo-site--marlow .sl .sl-btn--outline:hover {
  background: var(--sl-brown);
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-sec {
  padding: clamp(60px, 8vw, 120px) var(--sl-gutter);
}

.demo-hub-page .demo-site--marlow .sl .sl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--marlow .sl .sl-head > div {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-head > p {
  max-width: 24rem;
  color: var(--sl-muted);
}

/* header */
.demo-hub-page .demo-site--marlow .sl .sl-header {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: clamp(10px, 1.6vw, 22px) var(--sl-gutter) 0;
  padding: 8px 8px 8px 22px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(53, 33, 26, 0.12);
}

.demo-hub-page .demo-site--marlow .sl .sl-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.demo-hub-page .demo-site--marlow .sl .sl-brand span {
  font-size: 1.3rem;
  letter-spacing: 0.12em;
}

.demo-hub-page .demo-site--marlow .sl .sl-brand i {
  font-style: normal;
  font-family: var(--sl-mono);
  font-size: 0.8rem;
  color: var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-brand--light i {
  color: #f0b799;
}

.demo-hub-page .demo-site--marlow .sl .sl-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.demo-hub-page .demo-site--marlow .sl .sl-nav a {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  transition: background-color 0.2s ease;
}

.demo-hub-page .demo-site--marlow .sl .sl-nav a:hover {
  background: var(--sl-sand);
}

/* hero */
.demo-hub-page .demo-site--marlow .sl .sl-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: end;
  gap: 24px;
  min-height: 800px;
  margin-top: calc(-1 * clamp(10px, 1.6vw, 22px) - 62px);
  padding: 140px var(--sl-gutter) clamp(28px, 3.4vw, 48px);
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--marlow .sl .sl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2a1710;
}

.demo-hub-page .demo-site--marlow .sl .sl-hero__bg img {
  position: absolute;
  right: 0;
  top: 0;
  width: 72%;
  height: 100%;
  -o-object-position: 50% 24%;
     object-position: 50% 24%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

.demo-hub-page .demo-site--marlow .sl .sl-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(40, 20, 12, 0.65), rgba(40, 20, 12, 0) 45%);
}

.demo-hub-page .demo-site--marlow .sl .sl-hero__side {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 20rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

.demo-hub-page .demo-site--marlow .sl .sl-hero__copy {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  align-self: end;
  max-width: 46rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-hero h2 em {
  color: #f6c9ad;
}

.demo-hub-page .demo-site--marlow .sl .sl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-hub-page .demo-site--marlow .sl .sl-hero__cards {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.demo-hub-page .demo-site--marlow .sl .sl-glass {
  display: grid;
  gap: 6px;
  align-content: end;
  width: 230px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-glass span {
  font-family: var(--sl-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.demo-hub-page .demo-site--marlow .sl .sl-glass strong {
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--marlow .sl .sl-glass p {
  font-size: 0.8rem;
  opacity: 0.9;
}

.demo-hub-page .demo-site--marlow .sl .sl-glass b {
  margin-top: 6px;
  font-weight: 400;
  font-size: 1.1rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-hero__cards figure {
  width: 150px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px !important;
}

/* marquee */
.demo-hub-page .demo-site--marlow .sl .sl-marquee {
  overflow: hidden;
  background: var(--sl-terra);
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-marquee > div {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: sl-marquee 28s linear infinite;
}

.demo-hub-page .demo-site--marlow .sl .sl-marquee span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 16px 28px;
  font-family: var(--sl-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-hub-page .demo-site--marlow .sl .sl-marquee span::after {
  content: "✦";
}@media (prefers-reduced-motion: reduce) {
  .demo-hub-page .demo-site--marlow .sl .sl-marquee > div {
    animation: none;
  }}
/* why */
.demo-hub-page .demo-site--marlow .sl .sl-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 16px 28px;
  align-items: stretch;
}

.demo-hub-page .demo-site--marlow .sl .sl-why__title {
  position: relative;
  grid-column: 2;
  grid-row: 1/span 2;
  display: grid;
  place-items: center;
  align-self: center;
  width: 300px;
  aspect-ratio: 1;
  border: 1px solid var(--sl-line);
  border-radius: 50% !important;
  text-align: center;
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-why__title::before,
.demo-hub-page .demo-site--marlow .sl .sl-why__title::after {
  content: "";
  position: absolute;
  border: 1px solid var(--sl-line);
  border-radius: 50%;
}

.demo-hub-page .demo-site--marlow .sl .sl-why__title::before {
  inset: -22px;
}

.demo-hub-page .demo-site--marlow .sl .sl-why__title::after {
  inset: -46px;
  opacity: 0.5;
}

.demo-hub-page .demo-site--marlow .sl .sl-why article {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 190px !important;
  padding: 26px 28px;
  background: var(--sl-sand);
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}

.demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(2) {
  grid-column: 3;
  grid-row: 1;
  background: var(--sl-pink);
}

.demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(3) {
  grid-column: 1;
  grid-row: 2;
  background: var(--sl-lilac);
}

.demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(4) {
  grid-column: 3;
  grid-row: 2;
}

.demo-hub-page .demo-site--marlow .sl .sl-why i {
  position: absolute;
  top: 20px;
  right: 22px;
  font-style: normal;
  font-family: var(--sl-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-why b {
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  margin-top: 28px;
}

.demo-hub-page .demo-site--marlow .sl .sl-why p {
  color: var(--sl-muted);
  font-size: 0.92rem;
  max-width: 22rem;
}

/* services */
.demo-hub-page .demo-site--marlow .sl .sl-services {
  background: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--marlow .sl .sl-service {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 460px !important;
  overflow: hidden;
  border-radius: 22px !important;
  color: #fff;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.demo-hub-page .demo-site--marlow .sl .sl-service.is-selected {
  box-shadow: 0 0 0 4px var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-service figure {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.demo-hub-page .demo-site--marlow .sl .sl-service figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 20, 12, 0) 35%, rgba(40, 20, 12, 0.85) 100%);
}

.demo-hub-page .demo-site--marlow .sl .sl-service img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--marlow .sl .sl-service:hover img {
  transform: scale(1.06);
}

.demo-hub-page .demo-site--marlow .sl .sl-service > div {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 22px;
}

.demo-hub-page .demo-site--marlow .sl .sl-service span {
  font-family: var(--sl-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.demo-hub-page .demo-site--marlow .sl .sl-service h4 {
  color: #fff;
  font-size: 1.7rem !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-service p {
  font-size: 0.95rem;
  opacity: 0.9;
}

.demo-hub-page .demo-site--marlow .sl .sl-service .sl-btn {
  margin-top: 6px;
  min-height: 42px;
}

.demo-hub-page .demo-site--marlow .sl .sl-help {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 20px 40px;
  align-items: center;
  margin-top: 18px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--sl-pink);
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-help > div:first-child {
  display: grid;
  gap: 10px;
}

.demo-hub-page .demo-site--marlow .sl .sl-help__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--marlow .sl .sl-help__opts button {
  padding: 11px 20px;
  border: 1px solid var(--sl-brown);
  border-radius: 999px !important;
  background: transparent;
  color: var(--sl-brown);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--marlow .sl .sl-help__opts button:hover,
.demo-hub-page .demo-site--marlow .sl .sl-help__opts button.is-active {
  background: var(--sl-brown);
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-help__result {
  grid-column: 1/-1;
  color: var(--sl-brown);
  font-size: 0.95rem;
}

/* work */
.demo-hub-page .demo-site--marlow .sl .sl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.demo-hub-page .demo-site--marlow .sl .sl-filters button {
  padding: 10px 20px;
  border: 1px solid var(--sl-line);
  border-radius: 999px !important;
  background: #fff;
  color: var(--sl-ink);
  font-family: var(--sl-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--marlow .sl .sl-filters button:hover {
  border-color: var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-filters button.is-active {
  background: var(--sl-terra);
  border-color: var(--sl-terra);
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 340px;
  gap: 14px;
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery figure {
  position: relative;
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery figure:first-child {
  grid-row: span 2;
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 20, 12, 0) 50%, rgba(40, 20, 12, 0.8) 100%);
  pointer-events: none;
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery figure:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery figcaption {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: grid;
  gap: 4px;
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery figcaption span {
  font-family: var(--sl-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.demo-hub-page .demo-site--marlow .sl .sl-gallery figcaption b {
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

/* team */
.demo-hub-page .demo-site--marlow .sl .sl-team {
  background: var(--sl-sand);
}

.demo-hub-page .demo-site--marlow .sl .sl-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.demo-hub-page .demo-site--marlow .sl .sl-team article {
  display: grid;
  gap: 18px;
  align-content: start;
}

.demo-hub-page .demo-site--marlow .sl .sl-team figure {
  aspect-ratio: 4/4.6;
  border-radius: 200px 200px 18px 18px !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-team article > div {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.demo-hub-page .demo-site--marlow .sl .sl-team span {
  font-family: var(--sl-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-team p {
  color: var(--sl-muted);
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-team b {
  font-weight: 400;
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-team .sl-btn {
  margin-top: 6px;
}

/* first visit */
.demo-hub-page .demo-site--marlow .sl .sl-first {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 620px;
}

.demo-hub-page .demo-site--marlow .sl .sl-first__block {
  display: grid;
  gap: 1.2rem;
  align-content: center;
  justify-items: start;
  padding: clamp(40px, 6vw, 90px) clamp(24px, 5vw, 80px) clamp(40px, 6vw, 90px) var(--sl-gutter);
  background: var(--sl-terra);
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-first h3 {
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-first em {
  color: #fbe0cf;
}

.demo-hub-page .demo-site--marlow .sl .sl-first strong {
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 24rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-hub-page .demo-site--marlow .sl .sl-tags b {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  font-weight: 400;
  font-size: 0.85rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-first blockquote {
  margin: 0;
  font-family: var(--sl-mono);
  font-size: 1rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-first figure {
  position: relative;
  min-height: 620px;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-first figure img {
  position: absolute;
  inset: 0;
}

/* book */
.demo-hub-page .demo-site--marlow .sl .sl-book {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.demo-hub-page .demo-site--marlow .sl .sl-book__intro {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--marlow .sl .sl-book__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.8rem;
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-hub-page .demo-site--marlow .sl .sl-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--sl-muted);
}

.demo-hub-page .demo-site--marlow .sl .sl-form input:not([type=checkbox]),
.demo-hub-page .demo-site--marlow .sl .sl-form select,
.demo-hub-page .demo-site--marlow .sl .sl-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--sl-line);
  border-radius: 12px !important;
  background: var(--sl-cream);
  color: var(--sl-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-form textarea {
  resize: vertical;
  min-height: 110px;
}

.demo-hub-page .demo-site--marlow .sl .sl-form input:focus,
.demo-hub-page .demo-site--marlow .sl .sl-form select:focus,
.demo-hub-page .demo-site--marlow .sl .sl-form textarea:focus {
  outline: 0;
  border-color: var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-check {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  color: var(--sl-ink) !important;
  font-size: 0.9rem !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--sl-terra);
}

.demo-hub-page .demo-site--marlow .sl .sl-form .sl-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--marlow .sl .sl-result {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: var(--sl-brown);
  color: #fff;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-result strong {
  font-weight: 400;
  font-size: 1.2rem;
  color: #f6c9ad;
}

.demo-hub-page .demo-site--marlow .sl .sl-result p {
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-result small {
  opacity: 0.7;
}

/* final */
.demo-hub-page .demo-site--marlow .sl .sl-final {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 600px;
  padding: clamp(40px, 6vw, 90px) var(--sl-gutter);
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--marlow .sl .sl-final figure {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.demo-hub-page .demo-site--marlow .sl .sl-final figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(40, 20, 12, 0.85), rgba(40, 20, 12, 0.2) 60%);
}

.demo-hub-page .demo-site--marlow .sl .sl-final > div {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: 40rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-final h3 {
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 5.4rem) !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-final em {
  color: #f6c9ad;
}

/* footer */
.demo-hub-page .demo-site--marlow .sl .sl-footer {
  padding: clamp(48px, 6vw, 80px) var(--sl-gutter) 24px;
  background: var(--sl-brown);
  color: #fff;
}

.demo-hub-page .demo-site--marlow .sl .sl-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--marlow .sl .sl-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--marlow .sl .sl-footer h4 {
  margin-bottom: 0.4rem;
  color: #f0b799;
  font-family: var(--sl-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--marlow .sl .sl-footer p,
.demo-hub-page .demo-site--marlow .sl .sl-footer a:not(.sl-brand) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--marlow .sl .sl-footer a:not(.sl-brand):hover {
  color: #f0b799;
}

.demo-hub-page .demo-site--marlow .sl .sl-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem !important;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--marlow .sl .sl-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-nav {
    display: none;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 720px;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-hero__side {
    display: none;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-hero__copy,
  .demo-hub-page .demo-site--marlow .sl .sl-hero__cards {
    grid-column: 1;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-hero__cards {
    grid-row: 3;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-hero__cards figure {
    display: none;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-glass {
    width: 100%;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-why {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--marlow .sl .sl-why__title {
    grid-column: 1/-1;
    grid-row: 1;
    width: 240px;
    margin: 40px auto;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(4) {
    grid-column: 2;
    grid-row: 3;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--marlow .sl .sl-help {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--marlow .sl .sl-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--marlow .sl .sl-team__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-first,
  .demo-hub-page .demo-site--marlow .sl .sl-book {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--marlow .sl .sl-first figure {
    min-height: 380px;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-hero__bg img {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0.8;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-first__block {
    padding: clamp(40px, 6vw, 90px) var(--sl-gutter);
  }
  .demo-hub-page .demo-site--marlow .sl .sl-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--marlow .sl .sl-head {
    flex-direction: column;
    align-items: flex-start;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--marlow .sl .sl-header .sl-btn {
    display: none;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-header {
    grid-template-columns: 1fr;
    border-radius: 20px;
    padding: 12px 18px;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-hero__actions .sl-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-why,
  .demo-hub-page .demo-site--marlow .sl .sl-service-grid,
  .demo-hub-page .demo-site--marlow .sl .sl-gallery,
  .demo-hub-page .demo-site--marlow .sl .sl-footer__grid,
  .demo-hub-page .demo-site--marlow .sl .sl-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--marlow .sl .sl-why article:nth-of-type(n) {
    grid-column: 1;
    grid-row: auto;
  }
  .demo-hub-page .demo-site--marlow .sl .sl-gallery figure:first-child {
    grid-row: auto;
  }}
/* ============================================================
   Alex Morgan (consultant) demo - redesigned layout.
   Fusion of four references: a full-bleed photo hero with centred headline,
   a ghost "ABOUT" statement with stat row, a black problem grid, lime / white /
   dark service cards and a deep-green process section.
   Scoped to .demo-site--alexmorgan so no other demo is affected.
   ============================================================ */
.demo-hub-page .demo-site--alexmorgan {
  --cn-forest: #06302b;
  --cn-forest-2: #0b4a42;
  --cn-lime: #b9f25f;
  --cn-cream: #f7f8ee;
  --cn-ink: #0a1512;
  --cn-muted: #5d6b66;
  --cn-line: #dfe5d6;
  --cn-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --cn-mono: Inter, Arial, sans-serif;
  --cn-gutter: max(20px, calc((100% - 1240px) / 2));
  background: #fff !important;
  color: var(--cn-ink);
}

.demo-hub-page .demo-site--alexmorgan .cn {
  position: relative;
  background: #fff;
  color: var(--cn-ink);
  font-family: var(--cn-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--alexmorgan .cn * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--alexmorgan .cn [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--alexmorgan .cn img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--alexmorgan .cn figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--alexmorgan .cn p {
  margin: 0;
}

.demo-hub-page .demo-site--alexmorgan .cn a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--alexmorgan .cn article,
.demo-hub-page .demo-site--alexmorgan .cn form,
.demo-hub-page .demo-site--alexmorgan .cn aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--alexmorgan .cn ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--alexmorgan .cn h2,
.demo-hub-page .demo-site--alexmorgan .cn h3,
.demo-hub-page .demo-site--alexmorgan .cn h4 {
  margin: 0;
  max-width: none;
  font-family: var(--cn-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  color: inherit;
}

.demo-hub-page .demo-site--alexmorgan .cn h2 {
  font-size: clamp(2.6rem, 5.8vw, 5.2rem) !important;
  letter-spacing: -0.055em !important;
  line-height: 0.97 !important;
}

.demo-hub-page .demo-site--alexmorgan .cn h3 {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
}

.demo-hub-page .demo-site--alexmorgan .cn h4 {
  font-size: 1.4rem !important;
  letter-spacing: -0.025em !important;
}

.demo-hub-page .demo-site--alexmorgan .cn em {
  font-style: normal;
  font-family: var(--cn-mono);
  letter-spacing: -0.06em;
  color: #2c8a3f;
  font-size: 0.9em;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cn-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cn-forest);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-eyebrow--light {
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-eyebrow--light::before {
  background: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-text {
  color: var(--cn-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-family: var(--cn-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-btn i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: -12px;
  border-radius: 50%;
  background: var(--cn-forest);
  color: var(--cn-lime);
  font-style: normal;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-btn--dark {
  background: var(--cn-ink);
  border-color: var(--cn-ink);
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-btn--dark:hover {
  background: var(--cn-forest);
  border-color: var(--cn-forest);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-btn--lime {
  background: var(--cn-lime);
  border-color: var(--cn-lime);
  color: var(--cn-ink);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-btn--lime:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-btn--ghost:hover {
  background: #fff;
  color: var(--cn-ink);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-sec {
  padding: clamp(60px, 8vw, 120px) var(--cn-gutter);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-head > div {
  display: grid;
  gap: 1rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-head > p:not(.cn-eyebrow) {
  max-width: 24rem;
  color: var(--cn-muted);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-head--center h3 {
  max-width: 20ch;
}

/* header */
.demo-hub-page .demo-site--alexmorgan .cn .cn-header {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: clamp(10px, 1.6vw, 22px) var(--cn-gutter) 0;
  padding: 8px 8px 8px 20px;
  background: var(--cn-cream);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(6, 48, 43, 0.18);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-brand b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cn-forest);
  color: var(--cn-lime);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-brand span {
  display: grid;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-brand small {
  margin-top: 3px;
  font-family: var(--cn-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cn-muted);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-brand--light b {
  background: var(--cn-lime);
  color: var(--cn-forest);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-brand--light small {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-nav a {
  font-size: 0.9rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-nav a:hover {
  color: #2c8a3f;
}

/* hero */
.demo-hub-page .demo-site--alexmorgan .cn .cn-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 40px;
  min-height: 800px;
  margin-top: calc(-1 * clamp(10px, 1.6vw, 22px) - 62px);
  padding: 160px var(--cn-gutter) clamp(28px, 3.4vw, 48px);
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__bg img {
  opacity: 1;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 40%);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__copy {
  grid-column: 1/-1;
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  max-width: 52rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  font-family: var(--cn-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero h2 em {
  color: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__sub {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 46rem;
  margin-top: 12px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  -moz-column-gap: 10px;
       column-gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs li:first-child {
  border-radius: 14px 0 0 14px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs li:last-child {
  border-radius: 0 14px 14px 0;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs i {
  grid-row: 1/span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(185, 242, 95, 0.18);
  color: var(--cn-lime);
  font-style: normal;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs b {
  font-weight: 400;
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs span {
  font-size: 0.74rem;
  opacity: 0.75;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__note {
  grid-column: 2;
  display: grid;
  gap: 6px;
  width: 260px;
  padding: 20px;
  background: var(--cn-cream);
  color: var(--cn-ink);
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__note figure {
  aspect-ratio: 4/3;
  margin-bottom: 8px;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__note span {
  font-family: var(--cn-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cn-muted);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-hero__note strong {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* about */
.demo-hub-page .demo-site--alexmorgan .cn .cn-about {
  position: relative;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  background: var(--cn-cream);
  overflow: hidden;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-ghost {
  position: absolute;
  left: -2%;
  top: 4%;
  font-size: clamp(8rem, 24vw, 22rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: rgba(6, 48, 43, 0.05);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-about__text {
  position: relative;
  justify-self: end;
  max-width: 44rem;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-stats > div {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  background: #fff;
  border-radius: 16px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-stats > div:nth-child(2) {
  background: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-stats b {
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-stats span {
  font-size: 0.85rem;
  color: var(--cn-muted);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-stats > div:nth-child(2) span {
  color: var(--cn-ink);
}

/* problems */
.demo-hub-page .demo-site--alexmorgan .cn .cn-problems {
  background: #000;
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problems h3 {
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problems em {
  color: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problems .cn-head > p:not(.cn-eyebrow) {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problem-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problem {
  grid-column: span 2;
  display: grid;
  gap: 14px;
  align-content: space-between;
  min-height: 260px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px !important;
  background: #0f0f0f;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problem:nth-child(n+4) {
  grid-column: span 3;
  min-height: 220px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problem i {
  font-style: normal;
  font-family: var(--cn-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--cn-lime);
  transition: color 0.25s ease;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problem b {
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problem span {
  font-size: 0.9rem;
  opacity: 0.7;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problem:hover,
.demo-hub-page .demo-site--alexmorgan .cn .cn-problem.is-active {
  background: var(--cn-lime);
  border-color: var(--cn-lime);
  color: var(--cn-ink);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-problem:hover i,
.demo-hub-page .demo-site--alexmorgan .cn .cn-problem.is-active i {
  color: var(--cn-forest);
}

/* services */
.demo-hub-page .demo-site--alexmorgan .cn .cn-services {
  background: var(--cn-cream);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card {
  display: grid;
  grid-template-rows: 230px auto;
  overflow: hidden;
  background: #fff;
  border-radius: 22px !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card--lime {
  background: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card--dark {
  background: var(--cn-forest);
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card figure {
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card:hover img {
  transform: scale(1.05);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card > div {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 24px 24px 48px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card span {
  font-family: var(--cn-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card p {
  font-size: 0.95rem;
  opacity: 0.8;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-card .cn-btn {
  margin-top: 6px;
}

/* fit */
.demo-hub-page .demo-site--alexmorgan .cn .cn-fit {
  display: grid;
  justify-items: center;
  gap: 0;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-fit__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  align-items: center;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-fit article {
  display: grid;
  gap: 40px;
  align-content: space-between;
  min-height: 260px !important;
  padding: 28px;
  background: #f4f5ee;
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-fit article.is-dark {
  min-height: 320px !important;
  background: var(--cn-forest);
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-fit article b {
  font-weight: 400;
  font-size: 3rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #2c8a3f;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-fit article.is-dark b {
  color: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-fit article p {
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-link {
  margin-top: 32px;
  font-family: var(--cn-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cn-ink);
  padding-bottom: 4px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-link:hover {
  color: #2c8a3f;
  border-color: #2c8a3f;
}

/* process */
.demo-hub-page .demo-site--alexmorgan .cn .cn-process {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  background: var(--cn-forest);
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-process h3 {
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-process em {
  color: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-process__copy {
  display: grid;
  gap: 1.4rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-process__lead {
  max-width: 30rem;
  min-height: 3.2em;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.9);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-steps button {
  display: grid;
  gap: 28px;
  align-content: space-between;
  min-height: 130px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px !important;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-steps b {
  font-weight: 400;
  font-family: var(--cn-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-steps span {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-steps button:hover {
  border-color: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-steps button.is-active {
  background: var(--cn-lime);
  border-color: var(--cn-lime);
  color: var(--cn-ink);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-process__img {
  aspect-ratio: 4/4.4;
  border-radius: 22px !important;
}

/* proof */
.demo-hub-page .demo-site--alexmorgan .cn .cn-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: end;
  min-height: 340px !important;
  padding: 28px;
  background: #f4f5ee;
  border-radius: 18px !important;
  overflow: hidden;
  isolation: isolate;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article.is-lime {
  background: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article.is-photo p,
.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article.is-photo h4 {
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article.is-photo {
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article figure {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.45));
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof span {
  align-self: start;
  width: -moz-max-content;
  width: max-content;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--cn-ink);
  font-family: var(--cn-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article:not(.is-photo) span {
  position: absolute;
  top: 24px;
  left: 28px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof article.is-photo span {
  position: absolute;
  top: 24px;
  left: 28px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-proof p {
  font-size: 0.95rem;
  opacity: 0.8;
}

/* call */
.demo-hub-page .demo-site--alexmorgan .cn .cn-call {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  background: var(--cn-cream);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-call__intro {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-call__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.8rem;
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border-radius: 22px !important;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--cn-muted);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-form input,
.demo-hub-page .demo-site--alexmorgan .cn .cn-form select,
.demo-hub-page .demo-site--alexmorgan .cn .cn-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--cn-line);
  border-radius: 12px !important;
  background: #fbfcf6;
  color: var(--cn-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-form textarea {
  resize: vertical;
  min-height: 120px;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-form input:focus,
.demo-hub-page .demo-site--alexmorgan .cn .cn-form select:focus,
.demo-hub-page .demo-site--alexmorgan .cn .cn-form textarea:focus {
  outline: 0;
  border-color: var(--cn-forest);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-form .cn-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-result {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: var(--cn-forest);
  color: #fff;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-result strong {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-result p {
  font-size: 0.9rem;
  opacity: 0.85;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-result small {
  opacity: 0.65;
}

/* footer */
.demo-hub-page .demo-site--alexmorgan .cn .cn-footer {
  padding: clamp(56px, 7vw, 100px) var(--cn-gutter) 24px;
  background: var(--cn-forest);
  color: #fff;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-footer__big {
  max-width: 16ch;
  margin-bottom: clamp(36px, 5vw, 70px);
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  letter-spacing: -0.055em;
  line-height: 0.97;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-footer__big em {
  color: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-footer h4 {
  margin-bottom: 0.4rem;
  color: var(--cn-lime);
  font-family: var(--cn-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-footer p:not(.cn-footer__big):not(.cn-footer__legal),
.demo-hub-page .demo-site--alexmorgan .cn .cn-footer a:not(.cn-brand) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-footer a:not(.cn-brand):hover {
  color: var(--cn-lime);
}

.demo-hub-page .demo-site--alexmorgan .cn .cn-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--alexmorgan .cn .cn-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-nav {
    display: none;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 720px;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-hero__note {
    display: none;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs {
    grid-column: 1;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-about__text {
    justify-self: start;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-problem,
  .demo-hub-page .demo-site--alexmorgan .cn .cn-problem:nth-child(n+4) {
    grid-column: span 1;
    min-height: 220px;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-cards,
  .demo-hub-page .demo-site--alexmorgan .cn .cn-fit__grid,
  .demo-hub-page .demo-site--alexmorgan .cn .cn-proof__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-process,
  .demo-hub-page .demo-site--alexmorgan .cn .cn-call {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-head--center {
    align-items: center;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--alexmorgan .cn .cn-header .cn-btn {
    display: none;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-header {
    grid-template-columns: 1fr;
    border-radius: 18px;
    padding: 10px 16px;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-hero__actions .cn-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs li,
  .demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs li:first-child,
  .demo-hub-page .demo-site--alexmorgan .cn .cn-hero__tabs li:last-child {
    border-radius: 12px;
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-problem-grid,
  .demo-hub-page .demo-site--alexmorgan .cn .cn-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--alexmorgan .cn .cn-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}
/* Elena Brooks Coaching (coach) demo - clean minimal redesign. Scoped. */
.demo-hub-page .demo-site--elena {
  --ch-a: #d6f24b;
  --ch-ink: #111214;
  --ch-muted: #6b6f76;
  --ch-bg: #f1f0ec;
  --ch-line: #e4e2dc;
  --ch-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --ch-mono: Inter, Arial, sans-serif;
  --ch-gutter: max(16px, calc((100% - 1240px) / 2));
  background: var(--ch-bg) !important;
  color: var(--ch-ink);
}

.demo-hub-page .demo-site--elena .ch {
  position: relative;
  background: var(--ch-bg);
  color: var(--ch-ink);
  font-family: var(--ch-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
  padding: 12px 0 0;
}

.demo-hub-page .demo-site--elena .ch * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--elena .ch [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--elena .ch img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--elena .ch figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--elena .ch p,
.demo-hub-page .demo-site--elena .ch ul,
.demo-hub-page .demo-site--elena .ch ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--elena .ch a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--elena .ch article,
.demo-hub-page .demo-site--elena .ch form,
.demo-hub-page .demo-site--elena .ch aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--elena .ch h2,
.demo-hub-page .demo-site--elena .ch h3,
.demo-hub-page .demo-site--elena .ch h4 {
  margin: 0;
  max-width: none;
  font-family: var(--ch-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: inherit;
}

.demo-hub-page .demo-site--elena .ch h2 {
  font-size: clamp(2.4rem, 4.8vw, 4.2rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
}

.demo-hub-page .demo-site--elena .ch h3 {
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
}

.demo-hub-page .demo-site--elena .ch h4 {
  font-size: 1.3rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--elena .ch .ch-label {
  font-family: var(--ch-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-muted);
}

.demo-hub-page .demo-site--elena .ch .ch-text {
  color: var(--ch-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--elena .ch .ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 10px !important;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--elena .ch .ch-btn--lime {
  background: var(--ch-a);
  border-color: var(--ch-a);
  color: #111214;
}

.demo-hub-page .demo-site--elena .ch .ch-btn--lime:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--elena .ch .ch-btn--dark {
  background: var(--ch-ink);
  border-color: var(--ch-ink);
  color: #fff;
}

.demo-hub-page .demo-site--elena .ch .ch-btn--dark:hover {
  background: var(--ch-a);
  border-color: var(--ch-a);
  color: #111214;
}

.demo-hub-page .demo-site--elena .ch .ch-btn--glass {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.demo-hub-page .demo-site--elena .ch .ch-btn--glass:hover {
  background: #fff;
  color: #111214;
}

.demo-hub-page .demo-site--elena .ch .ch-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 0 var(--ch-gutter);
  padding: 8px 8px 8px 20px;
  background: #fff;
  border-radius: 14px;
}

.demo-hub-page .demo-site--elena .ch .ch-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--elena .ch .ch-brand b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ch-ink);
  color: #fff;
  font-weight: 400;
  font-size: 0.72rem;
}

.demo-hub-page .demo-site--elena .ch .ch-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--elena .ch .ch-brand--light b {
  background: var(--ch-a);
  color: #111214;
}

.demo-hub-page .demo-site--elena .ch .ch-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--elena .ch .ch-nav a {
  font-size: 0.88rem;
  color: #3a3d42;
}

.demo-hub-page .demo-site--elena .ch .ch-nav a:hover {
  color: #000;
}

.demo-hub-page .demo-site--elena .ch .professional-mode-switch {
  position: static !important;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 32px);
  align-items: center;
  gap: 2px;
  margin: 10px auto 0;
  padding: 4px !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: 12px;
  background: #fff !important;
  color: var(--ch-ink) !important;
}

.demo-hub-page .demo-site--elena .ch .professional-mode-switch span {
  padding: 0 12px;
  color: var(--ch-muted) !important;
  font-family: var(--ch-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--elena .ch .professional-mode-switch button {
  padding: 8px 16px;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ch-ink) !important;
  font-size: 0.82rem;
  cursor: pointer;
}

.demo-hub-page .demo-site--elena .ch .professional-mode-switch button:hover {
  background: var(--ch-bg) !important;
}

.demo-hub-page .demo-site--elena .ch .professional-mode-switch button.is-active {
  background: var(--ch-a) !important;
}

.demo-hub-page .demo-site--elena .ch .ch-hero {
  position: relative;
  display: grid;
  align-items: start;
  min-height: 600px;
  margin: 10px var(--ch-gutter) 0;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--elena .ch .ch-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0 !important;
  background: #000;
}

.demo-hub-page .demo-site--elena .ch .ch-hero__bg img {
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
}

.demo-hub-page .demo-site--elena .ch .ch-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 70%);
}

.demo-hub-page .demo-site--elena .ch .ch-hero__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
  max-width: 40rem;
}

.demo-hub-page .demo-site--elena .ch .ch-hero__copy h2 {
  color: #fff;
}

.demo-hub-page .demo-site--elena .ch .ch-hero__copy h2 span {
  color: rgba(255, 255, 255, 0.92);
}

.demo-hub-page .demo-site--elena .ch .ch-hero__copy > p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.9);
}

.demo-hub-page .demo-site--elena .ch .ch-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--elena .ch .ch-hero__copy small {
  margin-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.demo-hub-page .demo-site--elena .ch .ch-card {
  margin: 10px var(--ch-gutter) 0;
  padding: clamp(24px, 3.4vw, 44px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--elena .ch .ch-intro {
  display: grid;
  gap: 22px;
}

.demo-hub-page .demo-site--elena .ch .ch-intro__text {
  max-width: 44rem;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.demo-hub-page .demo-site--elena .ch .ch-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.demo-hub-page .demo-site--elena .ch .ch-stats > div {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: var(--ch-bg);
  border-radius: 12px;
}

.demo-hub-page .demo-site--elena .ch .ch-stats span {
  font-family: var(--ch-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ch-muted);
}

.demo-hub-page .demo-site--elena .ch .ch-stats b {
  margin-top: 24px;
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--elena .ch .ch-stats small {
  font-size: 0.82rem;
  color: var(--ch-muted);
}

.demo-hub-page .demo-site--elena .ch .ch-sec {
  margin: 10px var(--ch-gutter) 0;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3.4vw, 48px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--elena .ch .ch-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(24px, 3.4vw, 40px);
  max-width: 44rem;
}

.demo-hub-page .demo-site--elena .ch .ch-head > p:not(.ch-label) {
  color: var(--ch-muted);
  max-width: 30rem;
}

.demo-hub-page .demo-site--elena .ch .ch-reason {
  display: grid;
  gap: 10px;
  align-content: space-between;
  min-height: 200px;
  padding: 20px;
  border: 1px solid var(--ch-line);
  border-radius: 14px !important;
  background: #fff;
  color: var(--ch-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.demo-hub-page .demo-site--elena .ch .ch-reason i {
  font-style: normal;
  font-family: var(--ch-mono);
  font-size: 0.68rem;
  color: var(--ch-muted);
}

.demo-hub-page .demo-site--elena .ch .ch-reason b {
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--elena .ch .ch-reason span {
  font-size: 0.88rem;
  color: var(--ch-muted);
}

.demo-hub-page .demo-site--elena .ch .ch-reason:hover {
  border-color: var(--ch-ink);
}

.demo-hub-page .demo-site--elena .ch .ch-reason.is-active {
  background: var(--ch-a);
  border-color: var(--ch-a);
}

.demo-hub-page .demo-site--elena .ch .ch-reason.is-active span,
.demo-hub-page .demo-site--elena .ch .ch-reason.is-active i {
  color: #111214;
}

.demo-hub-page .demo-site--elena .ch .ch-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--ch-bg);
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--elena .ch .ch-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--elena .ch .ch-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ch-muted);
}

.demo-hub-page .demo-site--elena .ch .ch-form input,
.demo-hub-page .demo-site--elena .ch .ch-form select,
.demo-hub-page .demo-site--elena .ch .ch-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--ch-line);
  border-radius: 10px !important;
  background: #fff;
  color: var(--ch-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--elena .ch .ch-form textarea {
  resize: vertical;
  min-height: 110px;
}

.demo-hub-page .demo-site--elena .ch .ch-form input:focus,
.demo-hub-page .demo-site--elena .ch .ch-form select:focus,
.demo-hub-page .demo-site--elena .ch .ch-form textarea:focus {
  outline: 0;
  border-color: var(--ch-ink);
}

.demo-hub-page .demo-site--elena .ch .ch-form .ch-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--elena .ch .ch-result {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--ch-ink);
  color: #fff;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--elena .ch .ch-result strong {
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ch-a);
}

.demo-hub-page .demo-site--elena .ch .ch-result p {
  font-size: 0.88rem;
  opacity: 0.85;
}

.demo-hub-page .demo-site--elena .ch .ch-result small {
  opacity: 0.6;
}

.demo-hub-page .demo-site--elena .ch .ch-footer {
  margin: 10px var(--ch-gutter) 0;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 3.4vw, 48px) 22px;
  background: #111214;
  color: #fff;
  border-radius: 18px 18px 0 0;
}

.demo-hub-page .demo-site--elena .ch .ch-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--elena .ch .ch-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--elena .ch .ch-footer h4 {
  margin-bottom: 0.3rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--ch-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--elena .ch .ch-footer p:not(.ch-footer__legal),
.demo-hub-page .demo-site--elena .ch .ch-footer a:not(.ch-brand) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--elena .ch .ch-footer a:not(.ch-brand):hover {
  color: var(--ch-a);
}

.demo-hub-page .demo-site--elena .ch .ch-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--elena .ch .ch-for__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.demo-hub-page .demo-site--elena .ch .ch-method {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.demo-hub-page .demo-site--elena .ch .ch-method__intro,
.demo-hub-page .demo-site--elena .ch .ch-about__copy,
.demo-hub-page .demo-site--elena .ch .ch-call__intro {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  justify-items: start;
}

.demo-hub-page .demo-site--elena .ch .ch-method__intro figure,
.demo-hub-page .demo-site--elena .ch .ch-call__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.6rem;
  border-radius: 14px !important;
  width: 100%;
}

.demo-hub-page .demo-site--elena .ch .ch-steps {
  display: grid;
  border-top: 1px solid var(--ch-line);
}

.demo-hub-page .demo-site--elena .ch .ch-steps li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 10px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ch-line);
}

.demo-hub-page .demo-site--elena .ch .ch-steps b {
  font-weight: 400;
  font-family: var(--ch-mono);
  font-size: 0.8rem;
  color: var(--ch-muted);
  padding-top: 6px;
}

.demo-hub-page .demo-site--elena .ch .ch-steps p {
  margin-top: 4px;
  color: var(--ch-muted);
}

.demo-hub-page .demo-site--elena .ch .ch-options__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.demo-hub-page .demo-site--elena .ch .ch-opt {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
  min-height: 300px !important;
  padding: 24px;
  border: 1px solid var(--ch-line);
  border-radius: 14px !important;
  transition: border-color 0.2s ease;
}

.demo-hub-page .demo-site--elena .ch .ch-opt:hover {
  border-color: var(--ch-ink);
}

.demo-hub-page .demo-site--elena .ch .ch-opt.is-selected {
  border-color: var(--ch-ink);
  box-shadow: 0 0 0 1px var(--ch-ink);
}

.demo-hub-page .demo-site--elena .ch .ch-opt span {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ch-bg);
  font-family: var(--ch-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--elena .ch .ch-opt h4 {
  font-size: 1.6rem !important;
}

.demo-hub-page .demo-site--elena .ch .ch-opt p {
  color: var(--ch-muted);
}

.demo-hub-page .demo-site--elena .ch .ch-opt .ch-btn {
  margin-top: auto;
}

.demo-hub-page .demo-site--elena .ch .ch-about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.demo-hub-page .demo-site--elena .ch .ch-about__img {
  aspect-ratio: 4/4.6;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--elena .ch .ch-note {
  max-width: 32rem;
  color: var(--ch-muted);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--elena .ch .ch-price {
  margin-top: auto;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ch-ink) !important;
}

.demo-hub-page .demo-site--elena .ch .ch-opt figure {
  width: 100%;
  aspect-ratio: 16/10;
  margin-bottom: 4px;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--elena .ch .ch-call {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--elena .ch .ch-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--elena .ch .ch-nav {
    display: none;
  }
  .demo-hub-page .demo-site--elena .ch .ch-hero {
    min-height: 520px;
  }
  .demo-hub-page .demo-site--elena .ch .ch-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--elena .ch .ch-for__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--elena .ch .ch-method,
  .demo-hub-page .demo-site--elena .ch .ch-about,
  .demo-hub-page .demo-site--elena .ch .ch-call,
  .demo-hub-page .demo-site--elena .ch .ch-options__grid {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--elena .ch .ch-header .ch-btn {
    display: none;
  }
  .demo-hub-page .demo-site--elena .ch .ch-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--elena .ch .ch-hero__actions .ch-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--elena .ch .ch-stats,
  .demo-hub-page .demo-site--elena .ch .ch-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--elena .ch .professional-mode-switch span {
    display: none;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--elena .ch .ch-for__grid {
    grid-template-columns: minmax(0, 1fr);
  }}
/* Daniel Hart Math Tutoring (tutor) demo - clean minimal redesign. Scoped. */
.demo-hub-page .demo-site--daniel {
  --tu-a: #bcd8f5;
  --tu-ink: #111214;
  --tu-muted: #6b6f76;
  --tu-bg: #f1f0ec;
  --tu-line: #e4e2dc;
  --tu-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --tu-mono: Inter, Arial, sans-serif;
  --tu-gutter: max(16px, calc((100% - 1240px) / 2));
  background: var(--tu-bg) !important;
  color: var(--tu-ink);
}

.demo-hub-page .demo-site--daniel .tu {
  position: relative;
  background: var(--tu-bg);
  color: var(--tu-ink);
  font-family: var(--tu-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
  padding: 12px 0 0;
}

.demo-hub-page .demo-site--daniel .tu * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--daniel .tu [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--daniel .tu img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--daniel .tu figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--daniel .tu p,
.demo-hub-page .demo-site--daniel .tu ul,
.demo-hub-page .demo-site--daniel .tu ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--daniel .tu a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--daniel .tu article,
.demo-hub-page .demo-site--daniel .tu form,
.demo-hub-page .demo-site--daniel .tu aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--daniel .tu h2,
.demo-hub-page .demo-site--daniel .tu h3,
.demo-hub-page .demo-site--daniel .tu h4 {
  margin: 0;
  max-width: none;
  font-family: var(--tu-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: inherit;
}

.demo-hub-page .demo-site--daniel .tu h2 {
  font-size: clamp(2.4rem, 4.8vw, 4.2rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
}

.demo-hub-page .demo-site--daniel .tu h3 {
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
}

.demo-hub-page .demo-site--daniel .tu h4 {
  font-size: 1.3rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--daniel .tu .tu-label {
  font-family: var(--tu-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tu-muted);
}

.demo-hub-page .demo-site--daniel .tu .tu-text {
  color: var(--tu-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 10px !important;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--daniel .tu .tu-btn--accent {
  background: var(--tu-a);
  border-color: var(--tu-a);
  color: #111214;
}

.demo-hub-page .demo-site--daniel .tu .tu-btn--accent:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--daniel .tu .tu-btn--dark {
  background: var(--tu-ink);
  border-color: var(--tu-ink);
  color: #fff;
}

.demo-hub-page .demo-site--daniel .tu .tu-btn--dark:hover {
  background: var(--tu-a);
  border-color: var(--tu-a);
  color: #111214;
}

.demo-hub-page .demo-site--daniel .tu .tu-btn--glass {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.demo-hub-page .demo-site--daniel .tu .tu-btn--glass:hover {
  background: #fff;
  color: #111214;
}

.demo-hub-page .demo-site--daniel .tu .tu-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 0 var(--tu-gutter);
  padding: 8px 8px 8px 20px;
  background: #fff;
  border-radius: 14px;
}

.demo-hub-page .demo-site--daniel .tu .tu-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--daniel .tu .tu-brand b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--tu-ink);
  color: #fff;
  font-weight: 400;
  font-size: 0.72rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--daniel .tu .tu-brand--light b {
  background: var(--tu-a);
  color: #111214;
}

.demo-hub-page .demo-site--daniel .tu .tu-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--daniel .tu .tu-nav a {
  font-size: 0.88rem;
  color: #3a3d42;
}

.demo-hub-page .demo-site--daniel .tu .tu-nav a:hover {
  color: #000;
}

.demo-hub-page .demo-site--daniel .tu .professional-mode-switch {
  position: static !important;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 32px);
  align-items: center;
  gap: 2px;
  margin: 10px auto 0;
  padding: 4px !important;
  border: 1px solid var(--tu-line) !important;
  border-radius: 12px;
  background: #fff !important;
  color: var(--tu-ink) !important;
}

.demo-hub-page .demo-site--daniel .tu .professional-mode-switch span {
  padding: 0 12px;
  color: var(--tu-muted) !important;
  font-family: var(--tu-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--daniel .tu .professional-mode-switch button {
  padding: 8px 16px;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--tu-ink) !important;
  font-size: 0.82rem;
  cursor: pointer;
}

.demo-hub-page .demo-site--daniel .tu .professional-mode-switch button:hover {
  background: var(--tu-bg) !important;
}

.demo-hub-page .demo-site--daniel .tu .professional-mode-switch button.is-active {
  background: var(--tu-a) !important;
}

.demo-hub-page .demo-site--daniel .tu .tu-hero {
  position: relative;
  display: grid;
  align-items: start;
  min-height: 600px;
  margin: 10px var(--tu-gutter) 0;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0 !important;
  background: #000;
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__bg img {
  -o-object-position: 50% 40%;
     object-position: 50% 40%;
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 70%);
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
  max-width: 40rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__copy h2 {
  color: #fff;
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__copy h2 span {
  color: rgba(255, 255, 255, 0.92);
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__copy > p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.9);
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--daniel .tu .tu-hero__copy small {
  margin-top: 24px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.demo-hub-page .demo-site--daniel .tu .tu-card {
  margin: 10px var(--tu-gutter) 0;
  padding: clamp(24px, 3.4vw, 44px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--daniel .tu .tu-intro {
  display: grid;
  gap: 22px;
}

.demo-hub-page .demo-site--daniel .tu .tu-intro__text {
  max-width: 44rem;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.demo-hub-page .demo-site--daniel .tu .tu-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.demo-hub-page .demo-site--daniel .tu .tu-stats > div {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: var(--tu-bg);
  border-radius: 12px;
}

.demo-hub-page .demo-site--daniel .tu .tu-stats span {
  font-family: var(--tu-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tu-muted);
}

.demo-hub-page .demo-site--daniel .tu .tu-stats b {
  margin-top: 24px;
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--daniel .tu .tu-stats small {
  font-size: 0.82rem;
  color: var(--tu-muted);
}

.demo-hub-page .demo-site--daniel .tu .tu-sec {
  margin: 10px var(--tu-gutter) 0;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3.4vw, 48px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--daniel .tu .tu-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(24px, 3.4vw, 40px);
  max-width: 44rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-head > p:not(.tu-label) {
  color: var(--tu-muted);
  max-width: 30rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-reason {
  display: grid;
  gap: 10px;
  align-content: space-between;
  min-height: 200px;
  padding: 20px;
  border: 1px solid var(--tu-line);
  border-radius: 14px !important;
  background: #fff;
  color: var(--tu-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.demo-hub-page .demo-site--daniel .tu .tu-reason i {
  font-style: normal;
  font-family: var(--tu-mono);
  font-size: 0.68rem;
  color: var(--tu-muted);
}

.demo-hub-page .demo-site--daniel .tu .tu-reason b {
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--daniel .tu .tu-reason span {
  font-size: 0.88rem;
  color: var(--tu-muted);
}

.demo-hub-page .demo-site--daniel .tu .tu-reason:hover {
  border-color: var(--tu-ink);
}

.demo-hub-page .demo-site--daniel .tu .tu-reason.is-active {
  background: var(--tu-a);
  border-color: var(--tu-a);
}

.demo-hub-page .demo-site--daniel .tu .tu-reason.is-active span,
.demo-hub-page .demo-site--daniel .tu .tu-reason.is-active i {
  color: #111214;
}

.demo-hub-page .demo-site--daniel .tu .tu-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--tu-bg);
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--daniel .tu .tu-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--daniel .tu .tu-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--tu-muted);
}

.demo-hub-page .demo-site--daniel .tu .tu-form input,
.demo-hub-page .demo-site--daniel .tu .tu-form select,
.demo-hub-page .demo-site--daniel .tu .tu-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--tu-line);
  border-radius: 10px !important;
  background: #fff;
  color: var(--tu-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-form textarea {
  resize: vertical;
  min-height: 110px;
}

.demo-hub-page .demo-site--daniel .tu .tu-form input:focus,
.demo-hub-page .demo-site--daniel .tu .tu-form select:focus,
.demo-hub-page .demo-site--daniel .tu .tu-form textarea:focus {
  outline: 0;
  border-color: var(--tu-ink);
}

.demo-hub-page .demo-site--daniel .tu .tu-form .tu-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--daniel .tu .tu-result {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--tu-ink);
  color: #fff;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--daniel .tu .tu-result strong {
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--tu-a);
}

.demo-hub-page .demo-site--daniel .tu .tu-result p {
  font-size: 0.88rem;
  opacity: 0.85;
}

.demo-hub-page .demo-site--daniel .tu .tu-result small {
  opacity: 0.6;
}

.demo-hub-page .demo-site--daniel .tu .tu-footer {
  margin: 10px var(--tu-gutter) 0;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 3.4vw, 48px) 22px;
  background: #111214;
  color: #fff;
  border-radius: 18px 18px 0 0;
}

.demo-hub-page .demo-site--daniel .tu .tu-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.demo-hub-page .demo-site--daniel .tu .tu-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--daniel .tu .tu-footer h4 {
  margin-bottom: 0.3rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--tu-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--daniel .tu .tu-footer p:not(.tu-footer__legal),
.demo-hub-page .demo-site--daniel .tu .tu-footer a:not(.tu-brand) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-footer a:not(.tu-brand):hover {
  color: var(--tu-a);
}

.demo-hub-page .demo-site--daniel .tu .tu-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--daniel .tu .tu-help__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.demo-hub-page .demo-site--daniel .tu .tu-subject-list {
  display: grid;
  border-top: 1px solid var(--tu-line);
}

.demo-hub-page .demo-site--daniel .tu .tu-subject-list button {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 20px 8px;
  border: 0;
  border-bottom: 1px solid var(--tu-line);
  background: transparent;
  color: var(--tu-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, padding 0.2s ease;
}

.demo-hub-page .demo-site--daniel .tu .tu-subject-list span {
  font-family: var(--tu-mono);
  font-size: 0.74rem;
  color: var(--tu-muted);
}

.demo-hub-page .demo-site--daniel .tu .tu-subject-list b {
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--daniel .tu .tu-subject-list i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tu-line);
  border-radius: 50%;
  font-style: normal;
}

.demo-hub-page .demo-site--daniel .tu .tu-subject-list button:hover,
.demo-hub-page .demo-site--daniel .tu .tu-subject-list button.is-active {
  background: var(--tu-a);
  padding-left: 20px;
}

.demo-hub-page .demo-site--daniel .tu .tu-approach,
.demo-hub-page .demo-site--daniel .tu .tu-parents,
.demo-hub-page .demo-site--daniel .tu .tu-call {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.demo-hub-page .demo-site--daniel .tu .tu-approach__intro,
.demo-hub-page .demo-site--daniel .tu .tu-parents__copy,
.demo-hub-page .demo-site--daniel .tu .tu-call__intro {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  justify-items: start;
}

.demo-hub-page .demo-site--daniel .tu .tu-approach__intro figure,
.demo-hub-page .demo-site--daniel .tu .tu-call__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.6rem;
  border-radius: 14px !important;
  width: 100%;
}

.demo-hub-page .demo-site--daniel .tu .tu-approach__list {
  display: grid;
  border-top: 1px solid var(--tu-line);
}

.demo-hub-page .demo-site--daniel .tu .tu-approach__list article {
  display: grid;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--tu-line);
}

.demo-hub-page .demo-site--daniel .tu .tu-approach__list b {
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--daniel .tu .tu-approach__list p {
  color: var(--tu-muted);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-parents {
  align-items: center;
}

.demo-hub-page .demo-site--daniel .tu .tu-parents__img {
  aspect-ratio: 4/4.2;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--daniel .tu .tu-list {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 28rem;
  border-top: 1px solid var(--tu-line);
}

.demo-hub-page .demo-site--daniel .tu .tu-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--tu-line);
  font-size: 1rem;
}

.demo-hub-page .demo-site--daniel .tu .tu-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  padding: 0;
}

.demo-hub-page .demo-site--daniel .tu .tu-price {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  justify-items: start;
  padding: clamp(24px, 3.4vw, 44px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--daniel .tu .tu-price:first-child {
  background: var(--tu-a);
}

.demo-hub-page .demo-site--daniel .tu .tu-price:first-child .tu-label,
.demo-hub-page .demo-site--daniel .tu .tu-price:first-child .tu-text {
  color: #33414f;
}

.demo-hub-page .demo-site--daniel .tu .tu-price strong {
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 1;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--daniel .tu .tu-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--daniel .tu .tu-nav {
    display: none;
  }
  .demo-hub-page .demo-site--daniel .tu .tu-hero {
    min-height: 520px;
  }
  .demo-hub-page .demo-site--daniel .tu .tu-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--daniel .tu .tu-help__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--daniel .tu .tu-approach,
  .demo-hub-page .demo-site--daniel .tu .tu-parents,
  .demo-hub-page .demo-site--daniel .tu .tu-call,
  .demo-hub-page .demo-site--daniel .tu .tu-pricing {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--daniel .tu .tu-header .tu-btn {
    display: none;
  }
  .demo-hub-page .demo-site--daniel .tu .tu-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--daniel .tu .tu-hero__actions .tu-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--daniel .tu .tu-stats,
  .demo-hub-page .demo-site--daniel .tu .tu-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--daniel .tu .professional-mode-switch span {
    display: none;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--daniel .tu .tu-help__grid {
    grid-template-columns: minmax(0, 1fr);
  }}
/* ============================================================
   Jordan Lee (designer) demo - redesigned layout.
   Clean editorial portfolio: cream page, giant name wordmark, one vermilion
   accent, plain white cards. Scoped to .demo-site--jordanlee.
   ============================================================ */
.demo-hub-page .demo-site--jordanlee {
  --dz-red: #e5402a;
  --dz-ink: #141414;
  --dz-muted: #6c6a64;
  --dz-bg: #f3eee4;
  --dz-line: #e0d9cb;
  --dz-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --dz-mono: Inter, Arial, sans-serif;
  --dz-gutter: max(16px, calc((100% - 1240px) / 2));
  background: var(--dz-bg) !important;
  color: var(--dz-ink);
}

.demo-hub-page .demo-site--jordanlee .dz {
  position: relative;
  background: var(--dz-bg);
  color: var(--dz-ink);
  font-family: var(--dz-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--jordanlee .dz * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--jordanlee .dz [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--jordanlee .dz img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--jordanlee .dz figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--jordanlee .dz p {
  margin: 0;
}

.demo-hub-page .demo-site--jordanlee .dz a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--jordanlee .dz article,
.demo-hub-page .demo-site--jordanlee .dz form,
.demo-hub-page .demo-site--jordanlee .dz aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--jordanlee .dz h3,
.demo-hub-page .demo-site--jordanlee .dz h4,
.demo-hub-page .demo-site--jordanlee .dz h2 {
  margin: 0;
  max-width: none;
  font-family: var(--dz-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.045em !important;
  line-height: 1.04 !important;
  color: inherit;
}

.demo-hub-page .demo-site--jordanlee .dz h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.8rem) !important;
  letter-spacing: -0.05em !important;
}

.demo-hub-page .demo-site--jordanlee .dz h3 {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem) !important;
}

.demo-hub-page .demo-site--jordanlee .dz h4 {
  font-size: 1.4rem !important;
  letter-spacing: -0.025em !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-label {
  font-family: var(--dz-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dz-muted);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-text {
  color: var(--dz-muted);
  max-width: 30rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-btn--red {
  background: var(--dz-red);
  border-color: var(--dz-red);
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-btn--red:hover {
  background: var(--dz-ink);
  border-color: var(--dz-ink);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-btn--dark {
  background: var(--dz-ink);
  border-color: var(--dz-ink);
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-btn--dark:hover {
  background: var(--dz-red);
  border-color: var(--dz-red);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-btn--line {
  border-color: var(--dz-ink);
  color: var(--dz-ink);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-btn--line:hover {
  background: var(--dz-ink);
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px var(--dz-gutter);
  border-bottom: 1px solid var(--dz-ink);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-brand {
  display: inline-flex;
  flex-direction: column;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-brand small {
  font-family: var(--dz-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dz-muted);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-brand--light small {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-nav a {
  font-size: 0.88rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-nav a:hover {
  color: var(--dz-red);
}

/* hero */
.demo-hub-page .demo-site--jordanlee .dz .dz-hero {
  padding: clamp(24px, 4vw, 48px) var(--dz-gutter) clamp(40px, 5vw, 72px);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-wordmark {
  margin-bottom: clamp(20px, 3vw, 40px);
  font-size: clamp(5rem, 17.5vw, 17rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: var(--dz-red);
  white-space: nowrap;
  overflow: hidden;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: end;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-hero__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-hero__sub {
  max-width: 26rem;
  color: var(--dz-muted);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-hero__img {
  aspect-ratio: 4/3.4;
  border-radius: 6px !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-hero__meta {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--dz-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-hero__meta li {
  padding: 8px 14px;
  border: 1px solid var(--dz-ink);
  border-radius: 999px;
  text-align: center;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-hero__meta .is-arrow {
  border-color: var(--dz-red);
  background: var(--dz-red);
  color: #fff;
}

/* strip */
.demo-hub-page .demo-site--jordanlee .dz .dz-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 40px;
  padding: 18px var(--dz-gutter);
  border-block: 1px solid var(--dz-ink);
  font-family: var(--dz-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-sec {
  padding: clamp(56px, 8vw, 110px) var(--dz-gutter);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(26px, 4vw, 48px);
  max-width: 46rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-head > p:not(.dz-label) {
  color: var(--dz-muted);
  max-width: 32rem;
}

/* work */
.demo-hub-page .demo-site--jordanlee .dz .dz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-tabs button {
  padding: 10px 20px;
  border: 1px solid var(--dz-ink);
  border-radius: 999px !important;
  background: transparent;
  color: var(--dz-ink);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-tabs button:hover {
  background: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-tabs button.is-active {
  background: var(--dz-ink);
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(20px, 3vw, 40px);
  background: #fff;
  border-radius: 12px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case__copy {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case__facts {
  display: grid;
  border-top: 1px solid var(--dz-line);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case__facts article {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--dz-line);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case__facts b {
  font-weight: 400;
  font-family: var(--dz-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dz-muted);
  padding-top: 4px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case__facts p {
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case small {
  color: var(--dz-muted);
  font-size: 0.8rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case__images {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-case__images figure {
  min-height: 340px;
  border-radius: 8px !important;
}

/* services */
.demo-hub-page .demo-site--jordanlee .dz .dz-services {
  background: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-card {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-card figure {
  aspect-ratio: 4/3.2;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 8px !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-card img {
  transition: transform 0.8s ease;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-card:hover img {
  transform: scale(1.04);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-card p {
  color: var(--dz-muted);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-card .dz-btn {
  margin-top: 8px;
}

/* fit */
.demo-hub-page .demo-site--jordanlee .dz .dz-fit {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__intro {
  display: grid;
  gap: 1.1rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__intro figure {
  aspect-ratio: 4/3;
  margin-top: 0.6rem;
  border-radius: 8px !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__list {
  display: grid;
  border-top: 1px solid var(--dz-ink);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.4rem;
  gap: 4px 12px;
  align-items: center;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--dz-ink);
  background: transparent;
  color: var(--dz-ink);
  text-align: left;
  cursor: pointer;
  transition: padding 0.2s ease, background-color 0.2s ease;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__list b {
  grid-column: 1;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  letter-spacing: -0.035em;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__list span {
  grid-column: 1;
  color: var(--dz-muted);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__list i {
  grid-column: 2;
  grid-row: 1/span 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--dz-ink);
  border-radius: 50%;
  font-style: normal;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__list button:hover {
  padding-left: 12px;
  background: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__list button.is-active i {
  background: var(--dz-red);
  border-color: var(--dz-red);
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-fit__result {
  padding-top: 18px;
  font-family: var(--dz-mono);
  font-size: 0.74rem;
  color: var(--dz-muted);
}

/* process */
.demo-hub-page .demo-site--jordanlee .dz .dz-process {
  background: var(--dz-ink);
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-process .dz-label {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-process__lead {
  font-size: 1.15rem !important;
  color: #fff !important;
  max-width: 30rem;
  min-height: 3.2em;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps button {
  display: grid;
  gap: 40px;
  align-content: space-between;
  min-height: 200px;
  padding: 22px 22px 22px 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps button + button {
  padding-left: 22px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps button:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps b {
  font-weight: 400;
  font-family: var(--dz-mono);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps span {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps small {
  margin-top: -30px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps button:hover span {
  color: var(--dz-red);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps button.is-active span {
  color: var(--dz-red);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-steps button.is-active b {
  color: var(--dz-red);
}

/* pricing */
.demo-hub-page .demo-site--jordanlee .dz .dz-pricing {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-pricing__copy {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-pricing__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-pricing__cards article {
  display: grid;
  gap: 14px;
  align-content: space-between;
  min-height: 260px !important;
  padding: 24px;
  background: #fff;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-pricing__cards article:first-child {
  background: var(--dz-red);
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-pricing__cards article:first-child .dz-label {
  color: rgba(255, 255, 255, 0.8);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-pricing__cards strong {
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-pricing__cards p {
  font-size: 0.92rem;
  opacity: 0.85;
}

/* project */
.demo-hub-page .demo-site--jordanlee .dz .dz-project {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: stretch;
  background: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-project__intro {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-project__intro {
  grid-template-rows: auto auto 1fr;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-project__intro figure {
  position: relative;
  min-height: 260px;
  margin-top: 0.6rem;
  border-radius: 8px !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-project__intro figure img {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--dz-bg);
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--dz-muted);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-form input,
.demo-hub-page .demo-site--jordanlee .dz .dz-form select,
.demo-hub-page .demo-site--jordanlee .dz .dz-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--dz-line);
  border-radius: 8px !important;
  background: #fff;
  color: var(--dz-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-form textarea {
  resize: vertical;
  min-height: 90px;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-form input:focus,
.demo-hub-page .demo-site--jordanlee .dz .dz-form select:focus,
.demo-hub-page .demo-site--jordanlee .dz .dz-form textarea:focus {
  outline: 0;
  border-color: var(--dz-ink);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-form .dz-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-result {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--dz-ink);
  color: #fff;
  border-radius: 8px !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-result strong {
  font-weight: 400;
  font-size: 1.1rem;
  color: #ff8a77;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-result p {
  font-size: 0.88rem;
  opacity: 0.85;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-result small {
  opacity: 0.6;
}

/* footer */
.demo-hub-page .demo-site--jordanlee .dz .dz-footer {
  padding: clamp(48px, 7vw, 96px) var(--dz-gutter) 24px;
  background: var(--dz-red);
  color: #fff;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-footer__big {
  max-width: 12ch;
  margin-bottom: clamp(32px, 5vw, 64px);
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.demo-hub-page .demo-site--jordanlee .dz .dz-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-footer h4 {
  margin-bottom: 0.3rem;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--dz-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-footer a:not(.dz-brand) {
  color: #fff;
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-footer a:not(.dz-brand):hover {
  text-decoration: underline;
}

.demo-hub-page .demo-site--jordanlee .dz .dz-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--jordanlee .dz .dz-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-nav {
    display: none;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-hero__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-hero__meta {
    grid-auto-flow: column;
    justify-content: start;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-case,
  .demo-hub-page .demo-site--jordanlee .dz .dz-fit,
  .demo-hub-page .demo-site--jordanlee .dz .dz-pricing,
  .demo-hub-page .demo-site--jordanlee .dz .dz-project {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-steps button,
  .demo-hub-page .demo-site--jordanlee .dz .dz-steps button + button {
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 160px;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--jordanlee .dz .dz-header .dz-btn {
    display: none;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-hero__actions .dz-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-case__facts article {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-case__images {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-case__images figure {
    min-height: 240px;
  }
  .demo-hub-page .demo-site--jordanlee .dz .dz-pricing__cards,
  .demo-hub-page .demo-site--jordanlee .dz .dz-form__row,
  .demo-hub-page .demo-site--jordanlee .dz .dz-steps {
    grid-template-columns: minmax(0, 1fr);
  }}
/* ============================================================
   Carter & Vale (lawyer) demo - redesigned layout.
   Clean, restrained legal site: ivory page, near-black ink, one brass accent.
   Split hero, ruled service list, plain cards. Scoped to .demo-site--cartervale.
   ============================================================ */
.demo-hub-page .demo-site--cartervale {
  --lw-brass: #b5894a;
  --lw-wood: #4a2f1d;
  --lw-ink: #17120e;
  --lw-muted: #6d645a;
  --lw-bg: #f4f0e8;
  --lw-line: #ddd5c6;
  --lw-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --lw-mono: Inter, Arial, sans-serif;
  --lw-gutter: max(16px, calc((100% - 1240px) / 2));
  background: var(--lw-bg) !important;
  color: var(--lw-ink);
}

.demo-hub-page .demo-site--cartervale .lw {
  position: relative;
  background: var(--lw-bg);
  color: var(--lw-ink);
  font-family: var(--lw-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--cartervale .lw * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--cartervale .lw [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--cartervale .lw img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--cartervale .lw figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--cartervale .lw p {
  margin: 0;
}

.demo-hub-page .demo-site--cartervale .lw a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--cartervale .lw article,
.demo-hub-page .demo-site--cartervale .lw form,
.demo-hub-page .demo-site--cartervale .lw aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--cartervale .lw h2,
.demo-hub-page .demo-site--cartervale .lw h3,
.demo-hub-page .demo-site--cartervale .lw h4 {
  margin: 0;
  max-width: none;
  font-family: var(--lw-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: inherit;
}

.demo-hub-page .demo-site--cartervale .lw h2 {
  font-size: clamp(2.3rem, 4.4vw, 4rem) !important;
  letter-spacing: -0.05em !important;
}

.demo-hub-page .demo-site--cartervale .lw h3 {
  font-size: clamp(1.9rem, 3.4vw, 3rem) !important;
}

.demo-hub-page .demo-site--cartervale .lw h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.025em !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-label {
  font-family: var(--lw-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lw-muted);
}

.demo-hub-page .demo-site--cartervale .lw .lw-text {
  color: var(--lw-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--cartervale .lw .lw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 6px !important;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--cartervale .lw .lw-btn--dark {
  background: var(--lw-ink);
  border-color: var(--lw-ink);
  color: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-btn--dark:hover {
  background: var(--lw-brass);
  border-color: var(--lw-brass);
}

.demo-hub-page .demo-site--cartervale .lw .lw-btn--brass {
  background: var(--lw-brass);
  border-color: var(--lw-brass);
  color: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-btn--brass:hover {
  background: var(--lw-ink);
  border-color: var(--lw-ink);
}

.demo-hub-page .demo-site--cartervale .lw .lw-btn--line {
  border-color: var(--lw-ink);
  color: var(--lw-ink);
}

.demo-hub-page .demo-site--cartervale .lw .lw-btn--line:hover {
  background: var(--lw-ink);
  color: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px var(--lw-gutter);
  background: #fff;
  border-bottom: 1px solid var(--lw-line);
}

.demo-hub-page .demo-site--cartervale .lw .lw-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--cartervale .lw .lw-brand b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: var(--lw-ink);
  color: var(--lw-brass);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.demo-hub-page .demo-site--cartervale .lw .lw-brand span {
  display: grid;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--cartervale .lw .lw-brand small {
  font-family: var(--lw-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lw-muted);
}

.demo-hub-page .demo-site--cartervale .lw .lw-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-brand--light b {
  background: var(--lw-brass);
  color: var(--lw-ink);
}

.demo-hub-page .demo-site--cartervale .lw .lw-brand--light small {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--cartervale .lw .lw-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--cartervale .lw .lw-nav a {
  font-size: 0.88rem;
}

.demo-hub-page .demo-site--cartervale .lw .lw-nav a:hover {
  color: var(--lw-brass);
}

/* hero */
.demo-hub-page .demo-site--cartervale .lw .lw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 620px;
  padding-left: var(--lw-gutter);
  background: var(--lw-bg);
}

.demo-hub-page .demo-site--cartervale .lw .lw-hero__copy {
  display: grid;
  gap: 1.3rem;
  align-content: center;
  justify-items: start;
  padding: clamp(36px, 6vw, 90px) clamp(24px, 5vw, 80px) clamp(36px, 6vw, 90px) 0;
}

.demo-hub-page .demo-site--cartervale .lw .lw-hero__sub {
  max-width: 28rem;
  color: var(--lw-muted);
}

.demo-hub-page .demo-site--cartervale .lw .lw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--cartervale .lw .lw-hero__note {
  padding-top: 18px;
  border-top: 1px solid var(--lw-line);
  width: 100%;
  max-width: 28rem;
  font-family: var(--lw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lw-muted);
}

.demo-hub-page .demo-site--cartervale .lw .lw-hero__img {
  position: relative;
  border-radius: 0 !important;
  min-height: 420px;
}

.demo-hub-page .demo-site--cartervale .lw .lw-hero__img img {
  position: absolute;
  inset: 0;
}

/* strip */
.demo-hub-page .demo-site--cartervale .lw .lw-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 48px;
  padding: 20px var(--lw-gutter);
  background: var(--lw-wood);
  color: #fff;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--cartervale .lw .lw-strip span::before {
  content: "✳";
  margin-right: 14px;
  color: var(--lw-brass);
}

.demo-hub-page .demo-site--cartervale .lw .lw-notice {
  padding: 16px var(--lw-gutter);
  background: #fff;
  border-bottom: 1px solid var(--lw-line);
  font-size: 0.82rem;
  color: var(--lw-muted);
}

.demo-hub-page .demo-site--cartervale .lw .lw-notice strong {
  font-weight: 400;
  color: var(--lw-ink);
}

.demo-hub-page .demo-site--cartervale .lw .lw-sec {
  padding: clamp(56px, 8vw, 110px) var(--lw-gutter);
}

.demo-hub-page .demo-site--cartervale .lw .lw-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(26px, 4vw, 48px);
  max-width: 46rem;
}

.demo-hub-page .demo-site--cartervale .lw .lw-head > p:not(.lw-label) {
  color: var(--lw-muted);
  max-width: 32rem;
}

/* services */
.demo-hub-page .demo-site--cartervale .lw .lw-services {
  background: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-list {
  display: grid;
  border-top: 1px solid var(--lw-ink);
}

.demo-hub-page .demo-site--cartervale .lw .lw-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 20px;
  align-items: center;
  padding: 28px 8px;
  border-bottom: 1px solid var(--lw-ink);
  transition: background-color 0.2s ease, padding 0.2s ease;
}

.demo-hub-page .demo-site--cartervale .lw .lw-row:hover {
  background: var(--lw-bg);
  padding-left: 20px;
}

.demo-hub-page .demo-site--cartervale .lw .lw-row.is-selected {
  background: var(--lw-bg);
  box-shadow: inset 4px 0 0 var(--lw-brass);
}

.demo-hub-page .demo-site--cartervale .lw .lw-row span {
  font-family: var(--lw-mono);
  font-size: 0.78rem;
  color: var(--lw-muted);
}

.demo-hub-page .demo-site--cartervale .lw .lw-row h4 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-row p {
  color: var(--lw-muted);
  max-width: 28rem;
}

/* approach */
.demo-hub-page .demo-site--cartervale .lw .lw-approach {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}

.demo-hub-page .demo-site--cartervale .lw .lw-approach__img {
  aspect-ratio: 4/4.6;
  border-radius: 6px !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-approach__copy {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

.demo-hub-page .demo-site--cartervale .lw .lw-points {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--lw-line);
  margin-top: 0.6rem;
}

.demo-hub-page .demo-site--cartervale .lw .lw-points article {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--lw-line);
}

.demo-hub-page .demo-site--cartervale .lw .lw-points b {
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--cartervale .lw .lw-points p {
  color: var(--lw-muted);
  font-size: 0.95rem;
}

/* experience + matters */
.demo-hub-page .demo-site--cartervale .lw .lw-experience {
  background: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--cartervale .lw .lw-cards figure img {
  -o-object-position: 50% 8%;
     object-position: 50% 8%;
}

.demo-hub-page .demo-site--cartervale .lw .lw-cards figure {
  margin: -26px -26px 6px;
  height: 190px;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-cards article {
  overflow: hidden;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 230px !important;
  padding: 26px;
  border: 1px solid var(--lw-line);
  border-radius: 8px !important;
  background: var(--lw-bg);
}

.demo-hub-page .demo-site--cartervale .lw .lw-cards strong {
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--cartervale .lw .lw-cards p {
  color: var(--lw-muted);
  font-size: 0.93rem;
}

.demo-hub-page .demo-site--cartervale .lw .lw-matters .lw-cards article {
  background: #fff;
}

/* process */
.demo-hub-page .demo-site--cartervale .lw .lw-process {
  background: var(--lw-wood);
  color: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-process .lw-label {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--cartervale .lw .lw-process__lead {
  font-size: 1.15rem !important;
  color: #fff !important;
  max-width: 32rem;
  min-height: 3.4em;
}

.demo-hub-page .demo-site--cartervale .lw .lw-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.demo-hub-page .demo-site--cartervale .lw .lw-steps button {
  display: grid;
  gap: 36px;
  align-content: space-between;
  min-height: 170px;
  padding: 22px 22px 22px 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.demo-hub-page .demo-site--cartervale .lw .lw-steps button + button {
  padding-left: 22px;
}

.demo-hub-page .demo-site--cartervale .lw .lw-steps button:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site--cartervale .lw .lw-steps b {
  font-weight: 400;
  font-family: var(--lw-mono);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
}

.demo-hub-page .demo-site--cartervale .lw .lw-steps span {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--cartervale .lw .lw-steps button:hover span,
.demo-hub-page .demo-site--cartervale .lw .lw-steps button.is-active span,
.demo-hub-page .demo-site--cartervale .lw .lw-steps button.is-active b {
  color: #e6c488;
}

/* consult */
.demo-hub-page .demo-site--cartervale .lw .lw-consult {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: stretch;
  background: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-consult__intro {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1.1rem;
  align-content: start;
}

.demo-hub-page .demo-site--cartervale .lw .lw-consult__intro figure {
  position: relative;
  min-height: 260px;
  margin-top: 0.6rem;
  border-radius: 6px !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-consult__intro figure img {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--cartervale .lw .lw-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--lw-bg);
  border-radius: 8px !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--cartervale .lw .lw-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--lw-muted);
}

.demo-hub-page .demo-site--cartervale .lw .lw-form input:not([type=checkbox]),
.demo-hub-page .demo-site--cartervale .lw .lw-form select,
.demo-hub-page .demo-site--cartervale .lw .lw-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--lw-line);
  border-radius: 6px !important;
  background: #fff;
  color: var(--lw-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--cartervale .lw .lw-form textarea {
  resize: vertical;
  min-height: 100px;
}

.demo-hub-page .demo-site--cartervale .lw .lw-form input:focus,
.demo-hub-page .demo-site--cartervale .lw .lw-form select:focus,
.demo-hub-page .demo-site--cartervale .lw .lw-form textarea:focus {
  outline: 0;
  border-color: var(--lw-ink);
}

.demo-hub-page .demo-site--cartervale .lw .lw-ack {
  display: flex !important;
  align-items: flex-start;
  gap: 12px !important;
  color: var(--lw-ink) !important;
  font-size: 0.85rem !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-ack input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--lw-ink);
}

.demo-hub-page .demo-site--cartervale .lw .lw-form .lw-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--cartervale .lw .lw-result {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--lw-ink);
  color: #fff;
  border-radius: 6px !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-result strong {
  font-weight: 400;
  font-size: 1.1rem;
  color: #e6c488;
}

.demo-hub-page .demo-site--cartervale .lw .lw-result p {
  font-size: 0.88rem;
  opacity: 0.85;
}

.demo-hub-page .demo-site--cartervale .lw .lw-result small {
  opacity: 0.6;
}

/* footer */
.demo-hub-page .demo-site--cartervale .lw .lw-footer {
  padding: clamp(48px, 7vw, 96px) var(--lw-gutter) 24px;
  background: var(--lw-ink);
  color: #fff;
}

.demo-hub-page .demo-site--cartervale .lw .lw-footer__big {
  max-width: 16ch;
  margin-bottom: clamp(32px, 5vw, 64px);
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--cartervale .lw .lw-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-hub-page .demo-site--cartervale .lw .lw-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--cartervale .lw .lw-footer h4 {
  margin-bottom: 0.3rem;
  color: var(--lw-brass);
  font-family: var(--lw-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--cartervale .lw .lw-footer p:not(.lw-footer__big):not(.lw-footer__legal),
.demo-hub-page .demo-site--cartervale .lw .lw-footer a:not(.lw-brand) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.93rem;
}

.demo-hub-page .demo-site--cartervale .lw .lw-footer a:not(.lw-brand):hover {
  color: var(--lw-brass);
}

.demo-hub-page .demo-site--cartervale .lw .lw-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--cartervale .lw .lw-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-nav {
    display: none;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-hero {
    padding-left: 0;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-hero__copy {
    padding: 40px var(--lw-gutter);
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-hero__img {
    min-height: 360px;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-row {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-row p,
  .demo-hub-page .demo-site--cartervale .lw .lw-row .lw-btn {
    grid-column: 2;
    justify-self: start;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-approach,
  .demo-hub-page .demo-site--cartervale .lw .lw-consult {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-cards article {
    min-height: 0 !important;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-steps button,
  .demo-hub-page .demo-site--cartervale .lw .lw-steps button + button {
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    min-height: 140px;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--cartervale .lw .lw-header .lw-btn {
    display: none;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-hero__actions .lw-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--cartervale .lw .lw-form__row,
  .demo-hub-page .demo-site--cartervale .lw .lw-steps {
    grid-template-columns: minmax(0, 1fr);
  }}
/* ============================================================
   Clear Ledger (bookkeeper) demo - clean minimal redesign.
   Cool grey page, white rounded cards, one blue accent. Scoped to .demo-site--clearledger.
   ============================================================ */
.demo-hub-page .demo-site--clearledger {
  --bk-blue: #2f5bff;
  --bk-navy: #0d1b3d;
  --bk-ink: #101624;
  --bk-muted: #667085;
  --bk-bg: #eef1f6;
  --bk-line: #e1e5ee;
  --bk-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --bk-mono: Inter, Arial, sans-serif;
  --bk-gutter: max(16px, calc((100% - 1240px) / 2));
  background: var(--bk-bg) !important;
  color: var(--bk-ink);
}

.demo-hub-page .demo-site--clearledger .bk {
  position: relative;
  background: var(--bk-bg);
  color: var(--bk-ink);
  font-family: var(--bk-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
  padding: 12px 0 0;
}

.demo-hub-page .demo-site--clearledger .bk * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--clearledger .bk [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--clearledger .bk img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--clearledger .bk figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--clearledger .bk p,
.demo-hub-page .demo-site--clearledger .bk ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--clearledger .bk a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--clearledger .bk article,
.demo-hub-page .demo-site--clearledger .bk form,
.demo-hub-page .demo-site--clearledger .bk aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--clearledger .bk h2,
.demo-hub-page .demo-site--clearledger .bk h3,
.demo-hub-page .demo-site--clearledger .bk h4 {
  margin: 0;
  max-width: none;
  font-family: var(--bk-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: inherit;
}

.demo-hub-page .demo-site--clearledger .bk h2 {
  font-size: clamp(2.3rem, 4.8vw, 4.2rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
}

.demo-hub-page .demo-site--clearledger .bk h3 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem) !important;
}

.demo-hub-page .demo-site--clearledger .bk h4 {
  font-size: 1.3rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-label {
  font-family: var(--bk-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bk-muted);
}

.demo-hub-page .demo-site--clearledger .bk .bk-text {
  color: var(--bk-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 10px !important;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn--blue {
  background: var(--bk-blue);
  border-color: var(--bk-blue);
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn--blue:hover {
  background: var(--bk-navy);
  border-color: var(--bk-navy);
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn--dark {
  background: var(--bk-navy);
  border-color: var(--bk-navy);
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn--dark:hover {
  background: var(--bk-blue);
  border-color: var(--bk-blue);
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn--glass {
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn--glass:hover {
  background: #fff;
  color: var(--bk-ink);
}

.demo-hub-page .demo-site--clearledger .bk .bk-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 0 var(--bk-gutter);
  padding: 8px 8px 8px 20px;
  background: #fff;
  border-radius: 14px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--clearledger .bk .bk-brand b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bk-blue);
  color: #fff;
  font-weight: 400;
  font-size: 0.74rem;
}

.demo-hub-page .demo-site--clearledger .bk .bk-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 30px);
}

.demo-hub-page .demo-site--clearledger .bk .bk-nav a {
  font-size: 0.88rem;
  color: #3b4254;
}

.demo-hub-page .demo-site--clearledger .bk .bk-nav a:hover {
  color: var(--bk-blue);
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero {
  position: relative;
  display: grid;
  align-items: start;
  min-height: 600px;
  margin: 10px var(--bk-gutter) 0;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.1) 70%);
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
  max-width: 40rem;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__copy h2 {
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__copy > p:not(.bk-hero__proof) {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.92);
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__proof {
  margin-top: 24px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__proof b {
  font-weight: 400;
  color: #fff;
  font-size: 1.1rem;
  margin-right: 4px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-card {
  margin: 10px var(--bk-gutter) 0;
  padding: clamp(24px, 3.4vw, 44px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-intro {
  display: grid;
  gap: 22px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-intro__text {
  max-width: 46rem;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats > div {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: var(--bk-bg);
  border-radius: 12px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats span {
  font-family: var(--bk-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bk-muted);
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats b {
  margin-top: 22px;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats small {
  font-size: 0.8rem;
  color: var(--bk-muted);
}

.demo-hub-page .demo-site--clearledger .bk .bk-boundary {
  margin: 10px var(--bk-gutter) 0;
  padding: 14px 24px;
  background: #dde6ff;
  border-radius: 12px !important;
  font-size: 0.88rem;
  color: #26325a;
}

.demo-hub-page .demo-site--clearledger .bk .bk-boundary strong {
  font-weight: 400;
  color: var(--bk-navy);
}

.demo-hub-page .demo-site--clearledger .bk .bk-sec {
  margin: 10px var(--bk-gutter) 0;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3.4vw, 48px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(24px, 3.4vw, 40px);
  max-width: 46rem;
}

.demo-hub-page .demo-site--clearledger .bk .bk-head > p:not(.bk-label) {
  color: var(--bk-muted);
  max-width: 32rem;
}

/* problem */
.demo-hub-page .demo-site--clearledger .bk .bk-problem__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-status {
  display: grid;
  gap: 10px;
  align-content: space-between;
  min-height: 210px;
  padding: 20px;
  border: 1px solid var(--bk-line);
  border-radius: 14px !important;
  background: #fff;
  color: var(--bk-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.demo-hub-page .demo-site--clearledger .bk .bk-status i {
  font-style: normal;
  font-family: var(--bk-mono);
  font-size: 0.68rem;
  color: var(--bk-muted);
}

.demo-hub-page .demo-site--clearledger .bk .bk-status b {
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--clearledger .bk .bk-status span {
  font-size: 0.86rem;
  color: var(--bk-muted);
}

.demo-hub-page .demo-site--clearledger .bk .bk-status:hover {
  border-color: var(--bk-ink);
}

.demo-hub-page .demo-site--clearledger .bk .bk-status.is-active {
  background: var(--bk-blue);
  border-color: var(--bk-blue);
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-status.is-active span,
.demo-hub-page .demo-site--clearledger .bk .bk-status.is-active i {
  color: rgba(255, 255, 255, 0.85);
}

.demo-hub-page .demo-site--clearledger .bk .bk-reco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 14px;
  padding: 18px 22px;
  background: var(--bk-bg);
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-reco strong {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

/* services */
.demo-hub-page .demo-site--clearledger .bk .bk-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
  padding: 12px 12px 20px;
  border: 1px solid var(--bk-line);
  border-radius: 16px !important;
  transition: border-color 0.2s ease;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service:hover,
.demo-hub-page .demo-site--clearledger .bk .bk-service.is-selected {
  border-color: var(--bk-blue);
}

.demo-hub-page .demo-site--clearledger .bk .bk-service figure {
  width: 100%;
  aspect-ratio: 4/3.2;
  margin-bottom: 10px;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service span,
.demo-hub-page .demo-site--clearledger .bk .bk-service h4,
.demo-hub-page .demo-site--clearledger .bk .bk-service p,
.demo-hub-page .demo-site--clearledger .bk .bk-service strong,
.demo-hub-page .demo-site--clearledger .bk .bk-service button {
  margin-left: 8px;
  margin-right: 8px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service p {
  color: var(--bk-muted);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service strong {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--bk-blue);
}

.demo-hub-page .demo-site--clearledger .bk .bk-service button {
  margin-top: 8px;
}

/* report */
.demo-hub-page .demo-site--clearledger .bk .bk-report {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
}

.demo-hub-page .demo-site--clearledger .bk .bk-report__copy {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 1.1rem;
  align-content: start;
}

.demo-hub-page .demo-site--clearledger .bk .bk-report__copy figure {
  position: relative;
  min-height: 220px;
  margin-top: 0.4rem;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-report__copy figure img {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-report__list {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--bk-line);
}

.demo-hub-page .demo-site--clearledger .bk .bk-report__list li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 4px 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--bk-line);
}

.demo-hub-page .demo-site--clearledger .bk .bk-report__list span {
  grid-row: 1/span 2;
  font-family: var(--bk-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bk-blue);
  padding-top: 6px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-report__list b {
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--clearledger .bk .bk-report__list p {
  color: var(--bk-muted);
  font-size: 0.95rem;
}

/* process */
.demo-hub-page .demo-site--clearledger .bk .bk-process {
  background: var(--bk-navy);
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-process .bk-label {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--clearledger .bk .bk-process__lead {
  font-size: 1.15rem !important;
  color: #fff !important;
  max-width: 32rem;
  min-height: 3.4em;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps button {
  display: grid;
  gap: 36px;
  align-content: space-between;
  min-height: 170px;
  padding: 22px 22px 22px 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps button + button {
  padding-left: 22px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps button:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps b {
  font-weight: 400;
  font-family: var(--bk-mono);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps span {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps small {
  margin-top: -28px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps button:hover span,
.demo-hub-page .demo-site--clearledger .bk .bk-steps button.is-active span,
.demo-hub-page .demo-site--clearledger .bk .bk-steps button.is-active b {
  color: #8fa9ff;
}

/* pricing */
.demo-hub-page .demo-site--clearledger .bk .bk-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
}

.demo-hub-page .demo-site--clearledger .bk .bk-pricing__copy {
  display: grid;
  gap: 1.1rem;
  align-content: center;
  justify-items: start;
}

.demo-hub-page .demo-site--clearledger .bk .bk-pricing__copy strong {
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: var(--bk-blue);
}

.demo-hub-page .demo-site--clearledger .bk .bk-pricing__img {
  position: relative;
  min-height: 300px;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-pricing__img img {
  position: absolute;
  inset: 0;
}

/* trust */
.demo-hub-page .demo-site--clearledger .bk .bk-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px 12px 20px;
  border: 1px solid var(--bk-line);
  border-radius: 16px !important;
  background: var(--bk-bg);
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust figure {
  aspect-ratio: 4/3;
  margin-bottom: 8px;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust figure img {
  -o-object-position: 50% 12%;
     object-position: 50% 12%;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust article > span,
.demo-hub-page .demo-site--clearledger .bk .bk-trust article > strong,
.demo-hub-page .demo-site--clearledger .bk .bk-trust article > p {
  margin: 0 8px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust strong {
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust p {
  color: var(--bk-muted);
  font-size: 0.9rem;
}

/* call */
.demo-hub-page .demo-site--clearledger .bk .bk-call {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
}

.demo-hub-page .demo-site--clearledger .bk .bk-call__intro {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 1.1rem;
  align-content: start;
}

.demo-hub-page .demo-site--clearledger .bk .bk-call__intro figure {
  position: relative;
  min-height: 260px;
  margin-top: 0.4rem;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-call__intro figure img {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--bk-bg);
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--bk-muted);
}

.demo-hub-page .demo-site--clearledger .bk .bk-form input,
.demo-hub-page .demo-site--clearledger .bk .bk-form select,
.demo-hub-page .demo-site--clearledger .bk .bk-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--bk-line);
  border-radius: 10px !important;
  background: #fff;
  color: var(--bk-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--clearledger .bk .bk-form textarea {
  resize: vertical;
  min-height: 100px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-form input:focus,
.demo-hub-page .demo-site--clearledger .bk .bk-form select:focus,
.demo-hub-page .demo-site--clearledger .bk .bk-form textarea:focus {
  outline: 0;
  border-color: var(--bk-blue);
}

.demo-hub-page .demo-site--clearledger .bk .bk-form .bk-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--clearledger .bk .bk-result {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--bk-navy);
  color: #fff;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-result strong {
  font-weight: 400;
  font-size: 1.1rem;
  color: #8fa9ff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-result p {
  font-size: 0.88rem;
  opacity: 0.9;
}

.demo-hub-page .demo-site--clearledger .bk .bk-result small {
  opacity: 0.65;
}

/* footer */
.demo-hub-page .demo-site--clearledger .bk .bk-footer {
  margin: 10px var(--bk-gutter) 0;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3.4vw, 48px) 22px;
  background: var(--bk-navy);
  color: #fff;
  border-radius: 18px 18px 0 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-footer__big {
  max-width: 14ch;
  margin-bottom: clamp(30px, 5vw, 56px);
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.demo-hub-page .demo-site--clearledger .bk .bk-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.demo-hub-page .demo-site--clearledger .bk .bk-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--clearledger .bk .bk-footer h4 {
  margin-bottom: 0.3rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--bk-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-footer p:not(.bk-footer__big):not(.bk-footer__legal),
.demo-hub-page .demo-site--clearledger .bk .bk-footer a:not(.bk-brand) {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--clearledger .bk .bk-footer a:not(.bk-brand):hover {
  color: #8fa9ff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--clearledger .bk .bk-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-nav {
    display: none;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-hero {
    min-height: 520px;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-stats,
  .demo-hub-page .demo-site--clearledger .bk .bk-cards,
  .demo-hub-page .demo-site--clearledger .bk .bk-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-problem__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-status {
    min-height: 180px;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-report,
  .demo-hub-page .demo-site--clearledger .bk .bk-pricing,
  .demo-hub-page .demo-site--clearledger .bk .bk-call {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-steps button,
  .demo-hub-page .demo-site--clearledger .bk .bk-steps button + button {
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    min-height: 140px;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--clearledger .bk .bk-header .bk-btn {
    display: none;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-hero__actions .bk-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-stats,
  .demo-hub-page .demo-site--clearledger .bk .bk-cards,
  .demo-hub-page .demo-site--clearledger .bk .bk-trust__grid,
  .demo-hub-page .demo-site--clearledger .bk .bk-problem__grid,
  .demo-hub-page .demo-site--clearledger .bk .bk-form__row,
  .demo-hub-page .demo-site--clearledger .bk .bk-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-report__list li {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-report__list span {
    grid-row: auto;
  }}
/* ============================================================
   Megan Cole (virtual assistant) demo - clean minimal redesign.
   Warm grey page, white rounded cards, one mint accent. Scoped to .demo-site--megancole.
   ============================================================ */
.demo-hub-page .demo-site--megancole {
  --va-mint: #8fe3b3;
  --va-forest: #12382a;
  --va-ink: #14181a;
  --va-muted: #667069;
  --va-bg: #eef0ec;
  --va-line: #dfe3dc;
  --va-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --va-mono: Inter, Arial, sans-serif;
  --va-gutter: max(16px, calc((100% - 1240px) / 2));
  background: var(--va-bg) !important;
  color: var(--va-ink);
}

.demo-hub-page .demo-site--megancole .va {
  position: relative;
  background: var(--va-bg);
  color: var(--va-ink);
  font-family: var(--va-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
  padding: 12px 0 0;
}

.demo-hub-page .demo-site--megancole .va * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--megancole .va [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--megancole .va img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--megancole .va figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--megancole .va p,
.demo-hub-page .demo-site--megancole .va ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--megancole .va a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--megancole .va article,
.demo-hub-page .demo-site--megancole .va form,
.demo-hub-page .demo-site--megancole .va aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--megancole .va h2,
.demo-hub-page .demo-site--megancole .va h3,
.demo-hub-page .demo-site--megancole .va h4 {
  margin: 0;
  max-width: none;
  font-family: var(--va-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: inherit;
}

.demo-hub-page .demo-site--megancole .va h2 {
  font-size: clamp(2.4rem, 5vw, 4.4rem) !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
}

.demo-hub-page .demo-site--megancole .va h3 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem) !important;
}

.demo-hub-page .demo-site--megancole .va h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
}

.demo-hub-page .demo-site--megancole .va .va-label {
  font-family: var(--va-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--va-muted);
}

.demo-hub-page .demo-site--megancole .va .va-text {
  color: var(--va-muted);
  max-width: 32rem;
}

.demo-hub-page .demo-site--megancole .va .va-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 10px !important;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--megancole .va .va-btn--mint {
  background: var(--va-mint);
  border-color: var(--va-mint);
  color: var(--va-ink);
}

.demo-hub-page .demo-site--megancole .va .va-btn--mint:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-btn--dark {
  background: var(--va-forest);
  border-color: var(--va-forest);
  color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-btn--dark:hover {
  background: var(--va-mint);
  border-color: var(--va-mint);
  color: var(--va-ink);
}

.demo-hub-page .demo-site--megancole .va .va-btn--glass {
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-btn--glass:hover {
  background: #fff;
  color: var(--va-ink);
}

.demo-hub-page .demo-site--megancole .va .va-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 0 var(--va-gutter);
  padding: 8px 8px 8px 20px;
  background: #fff;
  border-radius: 14px;
}

.demo-hub-page .demo-site--megancole .va .va-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-hub-page .demo-site--megancole .va .va-brand b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--va-forest);
  color: var(--va-mint);
  font-weight: 400;
  font-size: 0.76rem;
}

.demo-hub-page .demo-site--megancole .va .va-brand span {
  display: grid;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--megancole .va .va-brand small {
  font-family: var(--va-mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--va-muted);
}

.demo-hub-page .demo-site--megancole .va .va-brand--light {
  color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-brand--light b {
  background: var(--va-mint);
  color: var(--va-forest);
}

.demo-hub-page .demo-site--megancole .va .va-brand--light small {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--megancole .va .va-nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 30px);
}

.demo-hub-page .demo-site--megancole .va .va-nav a {
  font-size: 0.88rem;
  color: #3b433e;
}

.demo-hub-page .demo-site--megancole .va .va-nav a:hover {
  color: #000;
}

.demo-hub-page .demo-site--megancole .va .va-hero {
  position: relative;
  display: grid;
  align-items: start;
  min-height: 620px;
  margin: 10px var(--va-gutter) 0;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.demo-hub-page .demo-site--megancole .va .va-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--megancole .va .va-hero__bg img {
  -o-object-position: 50% 40%;
     object-position: 50% 40%;
}

.demo-hub-page .demo-site--megancole .va .va-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 70%);
}

.demo-hub-page .demo-site--megancole .va .va-hero__copy {
  display: grid;
  gap: 1.3rem;
  justify-items: start;
  max-width: 40rem;
}

.demo-hub-page .demo-site--megancole .va .va-hero__copy h2 {
  color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-hero__copy > p:not(.va-hero__meta) {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.92);
}

.demo-hub-page .demo-site--megancole .va .va-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--megancole .va .va-hero__meta {
  margin-top: 24px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.demo-hub-page .demo-site--megancole .va .va-card {
  margin: 10px var(--va-gutter) 0;
  padding: clamp(24px, 3.4vw, 44px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--megancole .va .va-intro {
  display: grid;
  gap: 22px;
}

.demo-hub-page .demo-site--megancole .va .va-intro__text {
  max-width: 46rem;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.demo-hub-page .demo-site--megancole .va .va-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.demo-hub-page .demo-site--megancole .va .va-stats > div {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background: var(--va-bg);
  border-radius: 12px;
}

.demo-hub-page .demo-site--megancole .va .va-stats span {
  font-family: var(--va-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--va-muted);
}

.demo-hub-page .demo-site--megancole .va .va-stats b {
  margin-top: 22px;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--megancole .va .va-stats small {
  font-size: 0.8rem;
  color: var(--va-muted);
}

.demo-hub-page .demo-site--megancole .va .va-sec {
  margin: 10px var(--va-gutter) 0;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 3.4vw, 48px);
  background: #fff;
  border-radius: 18px;
}

.demo-hub-page .demo-site--megancole .va .va-head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(24px, 3.4vw, 40px);
  max-width: 46rem;
}

.demo-hub-page .demo-site--megancole .va .va-head > p:not(.va-label) {
  color: var(--va-muted);
  max-width: 32rem;
}

/* tasks */
.demo-hub-page .demo-site--megancole .va .va-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.demo-hub-page .demo-site--megancole .va .va-task {
  display: grid;
  gap: 10px;
  align-content: space-between;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--va-line);
  border-radius: 14px !important;
  background: #fff;
  color: var(--va-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.demo-hub-page .demo-site--megancole .va .va-task i {
  font-style: normal;
  font-family: var(--va-mono);
  font-size: 0.68rem;
  color: var(--va-muted);
}

.demo-hub-page .demo-site--megancole .va .va-task b {
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.demo-hub-page .demo-site--megancole .va .va-task span {
  font-size: 0.9rem;
  color: var(--va-muted);
}

.demo-hub-page .demo-site--megancole .va .va-task:hover {
  border-color: var(--va-ink);
}

.demo-hub-page .demo-site--megancole .va .va-task.is-active {
  background: var(--va-mint);
  border-color: var(--va-mint);
}

.demo-hub-page .demo-site--megancole .va .va-task.is-active span,
.demo-hub-page .demo-site--megancole .va .va-task.is-active i {
  color: #1e3a2c;
}

.demo-hub-page .demo-site--megancole .va .va-tasks__result {
  margin-top: 16px;
  font-family: var(--va-mono);
  font-size: 0.74rem;
  color: var(--va-muted);
}

/* boundary */
.demo-hub-page .demo-site--megancole .va .va-boundary {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
}

.demo-hub-page .demo-site--megancole .va .va-boundary__copy {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 1.1rem;
  align-content: start;
}

.demo-hub-page .demo-site--megancole .va .va-boundary__copy figure {
  position: relative;
  min-height: 240px;
  margin-top: 0.4rem;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--megancole .va .va-boundary__copy figure img {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--megancole .va .va-rules {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--va-line);
}

.demo-hub-page .demo-site--megancole .va .va-rules li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 4px 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--va-line);
}

.demo-hub-page .demo-site--megancole .va .va-rules span {
  grid-row: 1/span 2;
  font-family: var(--va-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2a7a54;
  padding-top: 6px;
}

.demo-hub-page .demo-site--megancole .va .va-rules b {
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
}

.demo-hub-page .demo-site--megancole .va .va-rules p {
  color: var(--va-muted);
  font-size: 0.95rem;
}

/* plans */
.demo-hub-page .demo-site--megancole .va .va-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--megancole .va .va-plan {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
  padding: 12px 12px 20px;
  border: 1px solid var(--va-line);
  border-radius: 16px !important;
  transition: border-color 0.2s ease;
}

.demo-hub-page .demo-site--megancole .va .va-plan:hover,
.demo-hub-page .demo-site--megancole .va .va-plan.is-selected {
  border-color: var(--va-forest);
}

.demo-hub-page .demo-site--megancole .va .va-plan figure {
  width: 100%;
  aspect-ratio: 16/10;
  margin-bottom: 10px;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--megancole .va .va-plan > span,
.demo-hub-page .demo-site--megancole .va .va-plan h4,
.demo-hub-page .demo-site--megancole .va .va-plan strong,
.demo-hub-page .demo-site--megancole .va .va-plan p,
.demo-hub-page .demo-site--megancole .va .va-plan button {
  margin-left: 8px;
  margin-right: 8px;
}

.demo-hub-page .demo-site--megancole .va .va-plan strong {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  color: #2a7a54;
}

.demo-hub-page .demo-site--megancole .va .va-plan p {
  color: var(--va-muted);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--megancole .va .va-plan button {
  margin-top: 8px;
}

/* process */
.demo-hub-page .demo-site--megancole .va .va-process {
  background: var(--va-forest);
  color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-process .va-label {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--megancole .va .va-process__lead {
  font-size: 1.15rem !important;
  color: #fff !important;
  max-width: 32rem;
  min-height: 3.4em;
}

.demo-hub-page .demo-site--megancole .va .va-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.demo-hub-page .demo-site--megancole .va .va-steps button {
  display: grid;
  gap: 36px;
  align-content: space-between;
  min-height: 170px;
  padding: 22px 22px 22px 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.demo-hub-page .demo-site--megancole .va .va-steps button + button {
  padding-left: 22px;
}

.demo-hub-page .demo-site--megancole .va .va-steps button:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site--megancole .va .va-steps b {
  font-weight: 400;
  font-family: var(--va-mono);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
}

.demo-hub-page .demo-site--megancole .va .va-steps span {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--megancole .va .va-steps small {
  margin-top: -28px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}

.demo-hub-page .demo-site--megancole .va .va-steps button:hover span,
.demo-hub-page .demo-site--megancole .va .va-steps button.is-active span,
.demo-hub-page .demo-site--megancole .va .va-steps button.is-active b {
  color: var(--va-mint);
}

/* tools */
.demo-hub-page .demo-site--megancole .va .va-tools {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.demo-hub-page .demo-site--megancole .va .va-tools > div {
  display: grid;
  gap: 0.9rem;
}

.demo-hub-page .demo-site--megancole .va .va-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--megancole .va .va-chips li {
  padding: 12px 20px;
  border: 1px solid var(--va-line);
  border-radius: 999px;
  background: var(--va-bg);
  font-size: 0.95rem;
}

/* voices */
.demo-hub-page .demo-site--megancole .va .va-voices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--megancole .va .va-voices article {
  display: grid;
  gap: 1.4rem;
  align-content: space-between;
  min-height: 260px !important;
  padding: 26px;
  border: 1px solid var(--va-line);
  border-radius: 16px !important;
  background: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-voices article.is-dark {
  background: var(--va-forest);
  border-color: var(--va-forest);
  color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-voices article > p {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--megancole .va .va-voices footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-hub-page .demo-site--megancole .va .va-voices footer i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--va-mint);
  color: var(--va-forest);
  font-style: normal;
  font-family: var(--va-mono);
  font-size: 0.66rem;
}

.demo-hub-page .demo-site--megancole .va .va-voices footer span {
  display: grid;
  font-size: 0.82rem;
  color: var(--va-muted);
  line-height: 1.3;
}

.demo-hub-page .demo-site--megancole .va .va-voices article.is-dark footer span {
  color: rgba(255, 255, 255, 0.7);
}

.demo-hub-page .demo-site--megancole .va .va-voices footer b {
  font-weight: 400;
  font-size: 0.95rem;
  color: inherit;
}

/* call */
.demo-hub-page .demo-site--megancole .va .va-call {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
}

.demo-hub-page .demo-site--megancole .va .va-call__intro {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 1.1rem;
  align-content: start;
}

.demo-hub-page .demo-site--megancole .va .va-call__intro figure {
  position: relative;
  min-height: 260px;
  margin-top: 0.4rem;
  border-radius: 14px !important;
}

.demo-hub-page .demo-site--megancole .va .va-call__intro figure img {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--megancole .va .va-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--va-bg);
  border-radius: 16px !important;
}

.demo-hub-page .demo-site--megancole .va .va-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--megancole .va .va-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--va-muted);
}

.demo-hub-page .demo-site--megancole .va .va-form input,
.demo-hub-page .demo-site--megancole .va .va-form select,
.demo-hub-page .demo-site--megancole .va .va-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--va-line);
  border-radius: 10px !important;
  background: #fff;
  color: var(--va-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--megancole .va .va-form textarea {
  resize: vertical;
  min-height: 100px;
}

.demo-hub-page .demo-site--megancole .va .va-form input:focus,
.demo-hub-page .demo-site--megancole .va .va-form select:focus,
.demo-hub-page .demo-site--megancole .va .va-form textarea:focus {
  outline: 0;
  border-color: var(--va-forest);
}

.demo-hub-page .demo-site--megancole .va .va-form .va-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--megancole .va .va-result {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--va-forest);
  color: #fff;
  border-radius: 10px !important;
}

.demo-hub-page .demo-site--megancole .va .va-result strong {
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--va-mint);
}

.demo-hub-page .demo-site--megancole .va .va-result p {
  font-size: 0.88rem;
  opacity: 0.9;
}

.demo-hub-page .demo-site--megancole .va .va-result small {
  opacity: 0.65;
}

/* footer */
.demo-hub-page .demo-site--megancole .va .va-footer {
  margin: 10px var(--va-gutter) 0;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3.4vw, 48px) 22px;
  background: var(--va-forest);
  color: #fff;
  border-radius: 18px 18px 0 0;
}

.demo-hub-page .demo-site--megancole .va .va-footer__big {
  max-width: 14ch;
  margin-bottom: clamp(30px, 5vw, 56px);
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.demo-hub-page .demo-site--megancole .va .va-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.demo-hub-page .demo-site--megancole .va .va-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--megancole .va .va-footer h4 {
  margin-bottom: 0.3rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--va-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--megancole .va .va-footer p:not(.va-footer__big):not(.va-footer__legal),
.demo-hub-page .demo-site--megancole .va .va-footer a:not(.va-brand) {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--megancole .va .va-footer a:not(.va-brand):hover {
  color: var(--va-mint);
}

.demo-hub-page .demo-site--megancole .va .va-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--megancole .va .va-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--megancole .va .va-nav {
    display: none;
  }
  .demo-hub-page .demo-site--megancole .va .va-hero {
    min-height: 520px;
  }
  .demo-hub-page .demo-site--megancole .va .va-hero__bg::after {
    background: rgba(0, 0, 0, 0.5);
  }
  .demo-hub-page .demo-site--megancole .va .va-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--megancole .va .va-task-grid,
  .demo-hub-page .demo-site--megancole .va .va-plan-grid,
  .demo-hub-page .demo-site--megancole .va .va-voices__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--megancole .va .va-task {
    min-height: 0;
  }
  .demo-hub-page .demo-site--megancole .va .va-boundary,
  .demo-hub-page .demo-site--megancole .va .va-tools,
  .demo-hub-page .demo-site--megancole .va .va-call {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--megancole .va .va-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--megancole .va .va-steps button,
  .demo-hub-page .demo-site--megancole .va .va-steps button + button {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    min-height: 120px;
  }
  .demo-hub-page .demo-site--megancole .va .va-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--megancole .va .va-header .va-btn {
    display: none;
  }
  .demo-hub-page .demo-site--megancole .va .va-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--megancole .va .va-hero__actions .va-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--megancole .va .va-stats,
  .demo-hub-page .demo-site--megancole .va .va-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--megancole .va .va-rules li {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--megancole .va .va-rules span {
    grid-row: auto;
  }}
/* ============================================================
   Taylor Reed (marketing) demo - type-led dark/orange redesign.
   Full-bleed sections, scorecard hero, metrics band, ruled channel rows,
   case study with big numbers, timeline, pricing table, orange call block.
   Scoped to .demo-site--taylorreed.
   ============================================================ */
.demo-hub-page .demo-site--taylorreed {
  --mk-orange: #ff6a2b;
  --mk-black: #0f0e0d;
  --mk-ink: #151412;
  --mk-muted: #6f6a63;
  --mk-paper: #f6f3ee;
  --mk-line: #e0dbd2;
  --mk-display: "GC Neue Machine", "Helvetica Neue", Arial, sans-serif;
  --mk-mono: Inter, Arial, sans-serif;
  --mk-gutter: max(20px, calc((100% - 1240px) / 2));
  background: var(--mk-black) !important;
  color: var(--mk-ink);
}

.demo-hub-page .demo-site--taylorreed .mk {
  position: relative;
  background: #fff;
  color: var(--mk-ink);
  font-family: var(--mk-display);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  overflow-x: clip;
}

.demo-hub-page .demo-site--taylorreed .mk * {
  font-family: inherit;
  font-synthesis: none;
  box-sizing: border-box;
}

.demo-hub-page .demo-site--taylorreed .mk [hidden] {
  display: none !important;
}

.demo-hub-page .demo-site--taylorreed .mk img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-hub-page .demo-site--taylorreed .mk figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--taylorreed .mk p,
.demo-hub-page .demo-site--taylorreed .mk ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-hub-page .demo-site--taylorreed .mk a {
  color: inherit;
  text-decoration: none;
}

.demo-hub-page .demo-site--taylorreed .mk article,
.demo-hub-page .demo-site--taylorreed .mk form,
.demo-hub-page .demo-site--taylorreed .mk aside {
  border-radius: 0 !important;
  height: auto !important;
}

.demo-hub-page .demo-site--taylorreed .mk h2,
.demo-hub-page .demo-site--taylorreed .mk h3,
.demo-hub-page .demo-site--taylorreed .mk h4 {
  margin: 0;
  max-width: none;
  font-family: var(--mk-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  color: inherit;
}

.demo-hub-page .demo-site--taylorreed .mk h2 {
  font-size: clamp(2.8rem, 6.4vw, 6rem) !important;
  letter-spacing: -0.06em !important;
  line-height: 0.95 !important;
}

.demo-hub-page .demo-site--taylorreed .mk h3 {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
}

.demo-hub-page .demo-site--taylorreed .mk h4 {
  font-size: 1.5rem !important;
  letter-spacing: -0.03em !important;
}

.demo-hub-page .demo-site--taylorreed .mk em {
  font-style: normal;
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-label {
  font-family: var(--mk-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-muted);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-label--light {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-label--dark {
  color: rgba(15, 14, 13, 0.7);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: 4px !important;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-btn--orange {
  background: var(--mk-orange);
  border-color: var(--mk-orange);
  color: #0f0e0d;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-btn--orange:hover {
  background: #fff;
  border-color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-btn--dark {
  background: var(--mk-black);
  border-color: var(--mk-black);
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-btn--dark:hover {
  background: var(--mk-orange);
  border-color: var(--mk-orange);
  color: #0f0e0d;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-btn--ghost:hover {
  background: #fff;
  color: var(--mk-black);
}

/* header + hero (dark) */
.demo-hub-page .demo-site--taylorreed .mk .mk-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px var(--mk-gutter);
  background: var(--mk-black);
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-brand small {
  font-family: var(--mk-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-nav a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-nav a:hover {
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding: clamp(40px, 6vw, 90px) var(--mk-gutter) clamp(56px, 7vw, 100px);
  background: var(--mk-black);
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-hero__copy {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-tag {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-family: var(--mk-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-hero__sub {
  max-width: 32rem;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.78);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: #fff;
  color: var(--mk-ink);
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mk-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-muted);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard header b {
  font-weight: 400;
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard ul {
  display: grid;
  gap: 16px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-bottom: 12px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard li span {
  font-size: 0.86rem;
  color: var(--mk-muted);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard li b {
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: -0.05em;
  line-height: 1;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard li i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--mk-line);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard li i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w);
  background: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-scorecard p {
  font-size: 0.74rem;
  color: var(--mk-muted);
}

/* band */
.demo-hub-page .demo-site--taylorreed .mk .mk-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 var(--mk-gutter);
  background: var(--mk-orange);
  color: var(--mk-black);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-band > div {
  display: grid;
  gap: 6px;
  padding: clamp(24px, 3.4vw, 44px) 24px clamp(24px, 3.4vw, 44px) 0;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-band > div + div {
  padding-left: 24px;
  border-left: 1px solid rgba(15, 14, 13, 0.25);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-band b {
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  letter-spacing: -0.06em;
  line-height: 1;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-band span {
  font-size: 0.86rem;
  max-width: 14rem;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-sec {
  padding: clamp(56px, 8vw, 110px) var(--mk-gutter);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(28px, 4vw, 52px);
  max-width: 46rem;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-head > p:not(.mk-label) {
  color: var(--mk-muted);
  max-width: 32rem;
}

/* help rows */
.demo-hub-page .demo-site--taylorreed .mk .mk-rows {
  border-top: 1px solid var(--mk-ink);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-rows li {
  border-bottom: 1px solid var(--mk-ink);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr) 2.6rem;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 24px 8px;
  border: 0;
  background: transparent;
  color: var(--mk-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, padding 0.2s ease;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row i {
  font-style: normal;
  font-family: var(--mk-mono);
  font-size: 0.74rem;
  color: var(--mk-muted);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row b {
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  letter-spacing: -0.045em;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row span {
  color: var(--mk-muted);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row em {
  font-family: var(--mk-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d9531a;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row u {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--mk-ink);
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.2rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row:hover {
  background: var(--mk-paper);
  padding-left: 20px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row.is-active {
  background: var(--mk-paper);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-row.is-active u {
  background: var(--mk-orange);
  border-color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-help__result {
  margin-top: 16px;
  font-family: var(--mk-mono);
  font-size: 0.74rem;
  color: var(--mk-muted);
}

/* work (dark) */
.demo-hub-page .demo-site--taylorreed .mk .mk-work {
  background: var(--mk-black);
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-work h3 {
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-work__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-tabs {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-tabs button {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 2px 8px;
  padding: 20px 12px 20px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, padding 0.2s ease;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-tabs i {
  grid-row: 1/span 2;
  font-style: normal;
  font-family: var(--mk-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 6px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-tabs b {
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.04em;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-tabs span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-tabs button:hover b,
.demo-hub-page .demo-site--taylorreed .mk .mk-tabs button.is-active b,
.demo-hub-page .demo-site--taylorreed .mk .mk-tabs button.is-active i {
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-tabs button.is-active {
  padding-left: 12px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-case {
  display: grid;
  gap: 26px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-case h4 {
  font-size: clamp(2rem, 3.6vw, 3rem) !important;
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-big {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-big > div {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-top: 2px solid var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-big b {
  font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 7rem);
  letter-spacing: -0.07em;
  line-height: 0.9;
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-big span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-case__text {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-case__text article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-case__text b {
  font-weight: 400;
  font-family: var(--mk-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-case__text p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.88);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-case__img {
  aspect-ratio: 21/8;
  border-radius: 6px !important;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-case small {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

/* process timeline */
.demo-hub-page .demo-site--taylorreed .mk .mk-process {
  background: var(--mk-paper);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.demo-hub-page .demo-site--taylorreed .mk .mk-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 2px;
  background: var(--mk-line);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-timeline button {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 0 12px 0 0;
  border: 0;
  background: transparent;
  color: var(--mk-ink);
  text-align: left;
  cursor: pointer;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-timeline i {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border: 2px solid var(--mk-ink);
  border-radius: 50%;
  background: var(--mk-paper);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-timeline b {
  margin-top: 16px;
  font-weight: 400;
  font-family: var(--mk-mono);
  font-size: 0.72rem;
  color: var(--mk-muted);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-timeline span {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  letter-spacing: -0.045em;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-timeline button:hover i,
.demo-hub-page .demo-site--taylorreed .mk .mk-timeline button.is-active i {
  background: var(--mk-orange);
  border-color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-timeline button.is-active span {
  color: #d9531a;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-process__lead {
  margin-top: clamp(28px, 4vw, 48px);
  max-width: 38rem;
  min-height: 3em;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

/* pricing table */
.demo-hub-page .demo-site--taylorreed .mk .mk-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--mk-ink);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--mk-ink);
  background: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col.is-featured {
  background: var(--mk-black);
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col.is-featured .mk-label {
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col.is-selected {
  box-shadow: inset 0 0 0 3px var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 400;
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  letter-spacing: -0.06em;
  line-height: 1;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col strong small {
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--mk-muted);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col.is-featured strong small {
  color: rgba(255, 255, 255, 0.6);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col ul {
  display: grid;
  border-top: 1px solid var(--mk-line);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col.is-featured ul {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col li {
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--mk-line);
  font-size: 0.95rem;
  position: relative;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col.is-featured li {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-col .mk-btn {
  margin-top: 8px;
  justify-self: start;
}

/* voices */
.demo-hub-page .demo-site--taylorreed .mk .mk-voices {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  background: var(--mk-paper);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__main {
  display: grid;
  gap: 1.6rem;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices blockquote {
  margin: 0;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__main footer {
  display: flex;
  align-items: center;
  gap: 14px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__main footer figure {
  width: 56px;
  height: 56px;
  border-radius: 50% !important;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__main footer figure img {
  -o-object-position: 50% 14%;
     object-position: 50% 14%;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__main footer span {
  display: grid;
  font-size: 0.85rem;
  color: var(--mk-muted);
  line-height: 1.3;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__main footer b {
  font-weight: 400;
  font-size: 1rem;
  color: var(--mk-ink);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__side {
  display: grid;
  border-top: 1px solid var(--mk-ink);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__side li {
  display: grid;
  gap: 10px;
  padding: 22px 0;
  border-bottom: 1px solid var(--mk-ink);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__side p {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-voices__side span {
  font-family: var(--mk-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mk-muted);
}

/* call */
.demo-hub-page .demo-site--taylorreed .mk .mk-call {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  padding: clamp(56px, 8vw, 110px) var(--mk-gutter);
  background: var(--mk-orange);
  color: var(--mk-black);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-call__copy {
  display: grid;
  gap: 1.4rem;
  align-content: start;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-call__copy h3 {
  font-size: clamp(3rem, 7vw, 6rem) !important;
  letter-spacing: -0.06em !important;
  line-height: 0.92 !important;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-call__copy > p:not(.mk-label) {
  max-width: 26rem;
  font-size: 1.1rem;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-call__copy ul {
  display: grid;
  border-top: 1px solid rgba(15, 14, 13, 0.4);
  max-width: 26rem;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-call__copy li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 14, 13, 0.4);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-form {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 36px);
  background: #fff;
  border-radius: 12px !important;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--mk-muted);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-form input,
.demo-hub-page .demo-site--taylorreed .mk .mk-form select,
.demo-hub-page .demo-site--taylorreed .mk .mk-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--mk-line);
  border-radius: 6px !important;
  background: var(--mk-paper);
  color: var(--mk-ink);
  font-size: 0.95rem;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-form textarea {
  resize: vertical;
  min-height: 90px;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-form input:focus,
.demo-hub-page .demo-site--taylorreed .mk .mk-form select:focus,
.demo-hub-page .demo-site--taylorreed .mk .mk-form textarea:focus {
  outline: 0;
  border-color: var(--mk-ink);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-form .mk-btn {
  justify-self: start;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-result {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: var(--mk-black);
  color: #fff;
  border-radius: 6px !important;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-result strong {
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-result p {
  font-size: 0.88rem;
  opacity: 0.9;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-result small {
  opacity: 0.65;
}

/* footer */
.demo-hub-page .demo-site--taylorreed .mk .mk-footer {
  padding: clamp(40px, 6vw, 80px) var(--mk-gutter) 22px;
  background: var(--mk-black);
  color: #fff;
  overflow: hidden;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-footer__big {
  margin: 0 0 clamp(24px, 4vw, 48px);
  font-size: clamp(4rem, 17vw, 16rem);
  letter-spacing: -0.07em;
  line-height: 0.82;
  white-space: nowrap;
  color: #fff;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-footer__grid > div {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-footer h4 {
  margin-bottom: 0.3rem;
  color: var(--mk-orange);
  font-family: var(--mk-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-footer p:not(.mk-footer__big):not(.mk-footer__legal),
.demo-hub-page .demo-site--taylorreed .mk .mk-footer a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

.demo-hub-page .demo-site--taylorreed .mk .mk-footer a:hover {
  color: var(--mk-orange);
}

.demo-hub-page .demo-site--taylorreed .mk .mk-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--taylorreed .mk .mk-header {
    grid-template-columns: 1fr auto;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-nav {
    display: none;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-band > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-band > div:nth-child(n+3) {
    border-top: 1px solid rgba(15, 14, 13, 0.25);
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-row {
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.6rem;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-row span,
  .demo-hub-page .demo-site--taylorreed .mk .mk-row em {
    grid-column: 2;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-row u {
    grid-column: 3;
    grid-row: 1;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-work__grid,
  .demo-hub-page .demo-site--taylorreed .mk .mk-voices,
  .demo-hub-page .demo-site--taylorreed .mk .mk-call {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-case__text {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-timeline::before {
    display: none;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-timeline button {
    grid-template-columns: 24px auto 1fr;
    align-items: center;
    gap: 12px;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-timeline b {
    margin-top: 0;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-table {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-col {
    border-right: 0;
    border-bottom: 1px solid var(--mk-ink);
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-col:last-child {
    border-bottom: 0;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--taylorreed .mk .mk-header .mk-btn {
    display: none;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-header {
    grid-template-columns: 1fr;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-hero__actions .mk-btn {
    flex: 1 1 100%;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-band {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-band > div,
  .demo-hub-page .demo-site--taylorreed .mk .mk-band > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(15, 14, 13, 0.25);
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-band > div:first-child {
    border-top: 0;
  }
  .demo-hub-page .demo-site--taylorreed .mk .mk-big,
  .demo-hub-page .demo-site--taylorreed .mk .mk-form__row {
    grid-template-columns: minmax(0, 1fr);
  }}
/* ===== Distinct layouts: tutor, assistant, bookkeeper (overrides, scoped) ===== */
/* ---- ASSISTANT: dark type-led page, checklist table, plans table ---- */
.demo-hub-page .demo-site--megancole {
  --va-mint: #8fe3b3;
  background: #0f1a15 !important;
}

.demo-hub-page .demo-site--megancole .va {
  background: #fff;
  padding-top: 0;
}

.demo-hub-page .demo-site--megancole .va .va-header {
  margin: 0;
  border-radius: 0;
  background: #0f1a15;
  color: #fff;
  padding: 18px var(--va-gutter);
}

.demo-hub-page .demo-site--megancole .va .va-brand span {
  color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-brand small {
  color: rgba(255, 255, 255, 0.55);
}

.demo-hub-page .demo-site--megancole .va .va-nav a {
  color: rgba(255, 255, 255, 0.75);
}

.demo-hub-page .demo-site--megancole .va .va-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
  min-height: 0;
  margin: 0;
  padding: clamp(40px, 6vw, 90px) var(--va-gutter) clamp(56px, 7vw, 100px);
  border-radius: 0;
  background: #0f1a15;
  isolation: auto;
}

.demo-hub-page .demo-site--megancole .va .va-hero__bg {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  z-index: 0;
  min-height: 380px;
  border-radius: 16px !important;
  background: none;
}

.demo-hub-page .demo-site--megancole .va .va-hero__bg::after {
  display: none;
}

.demo-hub-page .demo-site--megancole .va .va-hero__bg img {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--megancole .va .va-hero__copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  max-width: 40rem;
  gap: 1.6rem;
}

.demo-hub-page .demo-site--megancole .va .va-hero h2 {
  font-size: clamp(2.8rem, 5.6vw, 5.4rem) !important;
  letter-spacing: -0.065em !important;
  line-height: 0.92 !important;
}

.demo-hub-page .demo-site--megancole .va .va-intro {
  margin: 0;
  border-radius: 0;
  padding: 0;
  background: var(--va-mint);
}

.demo-hub-page .demo-site--megancole .va .va-intro > .va-label,
.demo-hub-page .demo-site--megancole .va .va-intro__text {
  display: none;
}

.demo-hub-page .demo-site--megancole .va .va-stats {
  margin: 0;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 var(--va-gutter);
}

.demo-hub-page .demo-site--megancole .va .va-stats > div {
  background: transparent;
  border-radius: 0;
  padding: 28px 20px 28px 0;
  border-right: 1px solid rgba(15, 26, 21, 0.25);
}

.demo-hub-page .demo-site--megancole .va .va-stats > div + div {
  padding-left: 20px;
}

.demo-hub-page .demo-site--megancole .va .va-stats > div:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site--megancole .va .va-stats span,
.demo-hub-page .demo-site--megancole .va .va-stats small {
  color: #1c3a2c;
}

.demo-hub-page .demo-site--megancole .va .va-stats b {
  margin-top: 10px;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
}

.demo-hub-page .demo-site--megancole .va .va-sec {
  margin: 0;
  border-radius: 0;
  padding: clamp(48px, 7vw, 96px) var(--va-gutter);
}

.demo-hub-page .demo-site--megancole .va .va-task-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid #0f1a15;
}

.demo-hub-page .demo-site--megancole .va .va-task {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.2fr) 2rem;
  align-items: center;
  min-height: 0;
  padding: 20px 8px;
  border: 0;
  border-bottom: 1px solid #0f1a15;
  border-radius: 0 !important;
  gap: 16px;
}

.demo-hub-page .demo-site--megancole .va .va-task::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #0f1a15;
  border-radius: 50%;
}

.demo-hub-page .demo-site--megancole .va .va-task.is-active::after {
  content: "✓";
  background: #0f1a15;
  color: #8fe3b3;
}

.demo-hub-page .demo-site--megancole .va .va-task:hover {
  background: #eef6f1;
}

.demo-hub-page .demo-site--megancole .va .va-task.is-active {
  background: #8fe3b3;
}

.demo-hub-page .demo-site--megancole .va .va-task b {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
}

.demo-hub-page .demo-site--megancole .va .va-boundary {
  background: #eef6f1;
}

.demo-hub-page .demo-site--megancole .va .va-plans {
  background: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-plan-grid {
  gap: 0;
  border: 1px solid #0f1a15;
}

.demo-hub-page .demo-site--megancole .va .va-plan {
  border: 0;
  border-right: 1px solid #0f1a15;
  border-radius: 0 !important;
  padding: 28px;
}

.demo-hub-page .demo-site--megancole .va .va-plan:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site--megancole .va .va-plan figure {
  aspect-ratio: 16/10;
  margin-bottom: 8px;
  border-radius: 8px !important;
}

.demo-hub-page .demo-site--megancole .va .va-plan > span,
.demo-hub-page .demo-site--megancole .va .va-plan h4,
.demo-hub-page .demo-site--megancole .va .va-plan strong,
.demo-hub-page .demo-site--megancole .va .va-plan p,
.demo-hub-page .demo-site--megancole .va .va-plan button {
  margin-left: 0;
  margin-right: 0;
}

.demo-hub-page .demo-site--megancole .va .va-plan strong {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
}

.demo-hub-page .demo-site--megancole .va .va-plan:nth-child(2) {
  background: #0f1a15;
  color: #fff;
}

.demo-hub-page .demo-site--megancole .va .va-plan:nth-child(2) p {
  color: rgba(255, 255, 255, 0.75);
}

.demo-hub-page .demo-site--megancole .va .va-plan:nth-child(2) strong {
  color: #8fe3b3;
}

.demo-hub-page .demo-site--megancole .va .va-plan:nth-child(2) .va-btn--dark {
  background: #8fe3b3;
  border-color: #8fe3b3;
  color: #0f1a15;
}

.demo-hub-page .demo-site--megancole .va .va-process {
  background: #f1f0ec;
  color: #0f1a15;
}

.demo-hub-page .demo-site--megancole .va .va-process .va-label {
  color: #667069;
}

.demo-hub-page .demo-site--megancole .va .va-process__lead {
  color: #0f1a15 !important;
}

.demo-hub-page .demo-site--megancole .va .va-steps {
  border-top-color: #0f1a15;
}

.demo-hub-page .demo-site--megancole .va .va-steps button {
  color: #0f1a15;
  border-right-color: #cfd6cf;
}

.demo-hub-page .demo-site--megancole .va .va-steps b,
.demo-hub-page .demo-site--megancole .va .va-steps small {
  color: #667069;
}

.demo-hub-page .demo-site--megancole .va .va-steps button:hover span,
.demo-hub-page .demo-site--megancole .va .va-steps button.is-active span,
.demo-hub-page .demo-site--megancole .va .va-steps button.is-active b {
  color: #1f8f5a;
}

.demo-hub-page .demo-site--megancole .va .va-voices__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid #0f1a15;
}

.demo-hub-page .demo-site--megancole .va .va-voices article {
  min-height: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  padding: 24px 8px;
  border: 0;
  border-bottom: 1px solid #0f1a15;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0f1a15 !important;
}

.demo-hub-page .demo-site--megancole .va .va-voices article footer span,
.demo-hub-page .demo-site--megancole .va .va-voices article.is-dark footer span {
  color: #667069;
}

.demo-hub-page .demo-site--megancole .va .va-call {
  background: #8fe3b3;
}

.demo-hub-page .demo-site--megancole .va .va-footer {
  margin: 0;
  border-radius: 0;
  background: #0f1a15;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--megancole .va .va-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--megancole .va .va-hero__bg {
    grid-column: 1;
    grid-row: 2;
    min-height: 300px;
  }
  .demo-hub-page .demo-site--megancole .va .va-hero__copy {
    grid-row: 1;
  }
  .demo-hub-page .demo-site--megancole .va .va-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hub-page .demo-site--megancole .va .va-task {
    grid-template-columns: 2.4rem minmax(0, 1fr) 2rem;
  }
  .demo-hub-page .demo-site--megancole .va .va-task span {
    grid-column: 2;
  }
  .demo-hub-page .demo-site--megancole .va .va-task::after {
    grid-column: 3;
    grid-row: 1;
  }
  .demo-hub-page .demo-site--megancole .va .va-plan {
    border-right: 0;
    border-bottom: 1px solid #0f1a15;
  }
  .demo-hub-page .demo-site--megancole .va .va-voices article {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }}
/* ---- BOOKKEEPER: split paper hero, step strip, comparison-style rows ---- */
.demo-hub-page .demo-site--clearledger {
  --bk-blue: #2f5bff;
  background: #fff !important;
}

.demo-hub-page .demo-site--clearledger .bk {
  background: #fff;
  padding-top: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-header {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid #e1e5ee;
  padding: 14px var(--bk-gutter);
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: #eef1f6;
  color: #101624;
  overflow: visible;
  isolation: auto;
  align-items: stretch;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__copy {
  padding: clamp(36px, 6vw, 90px) clamp(24px, 4vw, 64px) clamp(36px, 6vw, 90px) var(--bk-gutter);
  align-content: center;
  max-width: none;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__copy h2 {
  color: #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__copy > p:not(.bk-hero__proof) {
  color: #3b4254;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__proof {
  color: #3b4254;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__proof b {
  color: #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn--glass {
  border-color: #101624;
  color: #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-btn--glass:hover {
  background: #101624;
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__bg {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  z-index: 0;
  min-height: 420px;
  background: none;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__bg::after {
  display: none;
}

.demo-hub-page .demo-site--clearledger .bk .bk-hero__bg img {
  position: absolute;
  inset: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-card,
.demo-hub-page .demo-site--clearledger .bk .bk-sec,
.demo-hub-page .demo-site--clearledger .bk .bk-boundary,
.demo-hub-page .demo-site--clearledger .bk .bk-footer {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0 !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-card,
.demo-hub-page .demo-site--clearledger .bk .bk-sec {
  margin-top: 0;
  padding-left: var(--bk-gutter);
  padding-right: var(--bk-gutter);
}

.demo-hub-page .demo-site--clearledger .bk .bk-intro {
  padding-top: 0;
  padding-bottom: 0;
  background: #0d1b3d;
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-intro > .bk-label,
.demo-hub-page .demo-site--clearledger .bk .bk-intro__text {
  display: none;
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats {
  margin: 0;
  gap: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats > div {
  background: transparent;
  border-radius: 0;
  padding: 28px 20px 28px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats > div + div {
  padding-left: 20px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats > div:last-child {
  border-right: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats span,
.demo-hub-page .demo-site--clearledger .bk .bk-stats small {
  color: rgba(255, 255, 255, 0.65);
}

.demo-hub-page .demo-site--clearledger .bk .bk-stats b {
  margin-top: 10px;
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-boundary {
  margin: 0;
  padding: 14px var(--bk-gutter);
}

.demo-hub-page .demo-site--clearledger .bk .bk-problem__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-status {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  min-height: 0;
  padding: 20px 8px;
  border: 0;
  border-bottom: 1px solid #101624;
  border-radius: 0 !important;
  gap: 16px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-status b {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
}

.demo-hub-page .demo-site--clearledger .bk .bk-status:hover {
  background: #eef1f6;
}

.demo-hub-page .demo-site--clearledger .bk .bk-status.is-active {
  background: #2f5bff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-services {
  background: #eef1f6;
}

.demo-hub-page .demo-site--clearledger .bk .bk-cards {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service {
  display: grid;
  grid-template-columns: 9rem 14rem minmax(0, 1fr) 11rem auto;
  align-items: center;
  gap: 18px;
  padding: 16px 8px;
  border: 0;
  border-bottom: 1px solid #101624;
  border-radius: 0 !important;
  background: transparent;
  justify-items: stretch;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service figure {
  grid-row: 1;
  width: 100%;
  aspect-ratio: 4/3;
  margin: 0;
  border-radius: 6px !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service span,
.demo-hub-page .demo-site--clearledger .bk .bk-service h4,
.demo-hub-page .demo-site--clearledger .bk .bk-service p,
.demo-hub-page .demo-site--clearledger .bk .bk-service strong,
.demo-hub-page .demo-site--clearledger .bk .bk-service button {
  margin: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service span {
  display: none;
}

.demo-hub-page .demo-site--clearledger .bk .bk-service:hover,
.demo-hub-page .demo-site--clearledger .bk .bk-service.is-selected {
  background: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-report {
  background: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-process {
  background: #fff;
  color: #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-process .bk-label {
  color: #667085;
}

.demo-hub-page .demo-site--clearledger .bk .bk-process__lead {
  color: #101624 !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps {
  border-top: 0;
  counter-reset: s;
  gap: 12px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps button {
  position: relative;
  min-height: 150px;
  padding: 20px !important;
  border: 1px solid #101624;
  border-radius: 0;
  color: #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps button:last-child {
  border-right: 1px solid #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps b,
.demo-hub-page .demo-site--clearledger .bk .bk-steps small {
  color: #667085;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps button:hover,
.demo-hub-page .demo-site--clearledger .bk .bk-steps button.is-active {
  background: #2f5bff;
  border-color: #2f5bff;
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-steps button:hover span,
.demo-hub-page .demo-site--clearledger .bk .bk-steps button.is-active span,
.demo-hub-page .demo-site--clearledger .bk .bk-steps button:hover b,
.demo-hub-page .demo-site--clearledger .bk .bk-steps button.is-active b,
.demo-hub-page .demo-site--clearledger .bk .bk-steps button:hover small,
.demo-hub-page .demo-site--clearledger .bk .bk-steps button.is-active small {
  color: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-pricing {
  background: #eef1f6;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid #101624;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust article {
  display: grid;
  grid-template-columns: 7rem 14rem minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  padding: 16px 8px;
  border: 0;
  border-bottom: 1px solid #101624;
  border-radius: 0 !important;
  background: transparent;
  gap: 18px;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust figure {
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50% !important;
}

.demo-hub-page .demo-site--clearledger .bk .bk-trust article > span,
.demo-hub-page .demo-site--clearledger .bk .bk-trust article > strong,
.demo-hub-page .demo-site--clearledger .bk .bk-trust article > p {
  margin: 0;
}

.demo-hub-page .demo-site--clearledger .bk .bk-call {
  background: #fff;
}

.demo-hub-page .demo-site--clearledger .bk .bk-footer {
  margin: 0;
}@media (max-width: 1000px) {
  .demo-hub-page .demo-site--clearledger .bk .bk-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-hero__bg {
    grid-column: 1;
    grid-row: 2;
    min-height: 320px;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-hero__copy {
    padding: 36px var(--bk-gutter);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-status {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-status span {
    grid-column: 2;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-service {
    grid-template-columns: 7rem minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-service h4,
  .demo-hub-page .demo-site--clearledger .bk .bk-service p,
  .demo-hub-page .demo-site--clearledger .bk .bk-service strong,
  .demo-hub-page .demo-site--clearledger .bk .bk-service button {
    grid-column: 2;
    justify-self: start;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-trust article {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-trust article > span,
  .demo-hub-page .demo-site--clearledger .bk .bk-trust article > strong,
  .demo-hub-page .demo-site--clearledger .bk .bk-trust article > p {
    grid-column: 2;
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-trust figure {
    grid-row: 1/span 3;
  }}@media (max-width: 640px) {
  .demo-hub-page .demo-site--clearledger .bk .bk-service {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
  .demo-hub-page .demo-site--clearledger .bk .bk-service .bk-btn {
    white-space: normal;
    justify-self: stretch;
    height: auto;
    padding: 10px 14px;
  }}

/* dropdown: dark native popup, and keep the controls above the demo preview so no white block shows behind the list */
.demo-hub-page .demo-hub__controls {
  position: relative;
  z-index: 30;
}

.demo-hub-page .demo-hub__selector select {
  color-scheme: dark;
  -webkit-appearance: menulist;
  -moz-appearance: auto;
       appearance: auto;
}

.demo-hub-page .demo-hub__selector select option {
  background: #1d1d1d;
  color: #ffffff;
}

.demo-hub-page .demo-site {
  position: relative;
  z-index: 1;
}

/* custom dropdown for "Choose what you do" */
.demo-hub-page .demo-hub__selector {
  position: relative;
}

.demo-hub-page .demo-dd__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  min-height: 0;
  padding: 0;
  border: 0;
}

.demo-hub-page .demo-dd {
  position: relative;
  width: 100%;
}

.demo-hub-page .demo-dd__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  background: #1d1d1d;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.demo-hub-page .demo-dd__btn::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 1rem;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: translateY(-2px) rotate(45deg);
}

.demo-hub-page .demo-dd__btn[aria-expanded=true]::after {
  transform: translateY(2px) rotate(-135deg);
}

.demo-hub-page .demo-dd__btn:focus-visible {
  outline: 2px solid #b9ff45;
  outline-offset: 2px;
}

.demo-hub-page .demo-dd__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  background: #1d1d1d;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.demo-hub-page .demo-dd__list[hidden] {
  display: none;
}

.demo-hub-page .demo-dd__list li {
  padding: 0.65rem 1rem;
  color: #ffffff;
  cursor: pointer;
}

.demo-hub-page .demo-dd__list li:hover, .demo-hub-page .demo-dd__list li:focus {
  background: #b9ff45;
  color: #121212;
  outline: none;
}

.demo-hub-page .demo-dd__list li[aria-selected=true] {
  box-shadow: inset 3px 0 0 #b9ff45;
}
/* back to top, Website Demos page only */
.demo-hub-page .qow-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #b9ff45;
  border-radius: 4px;
  background: #121212;
  color: #b9ff45;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, background-color 0.18s ease, color 0.18s ease;
}
.demo-hub-page .qow-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.demo-hub-page .qow-to-top:hover,
.demo-hub-page .qow-to-top:focus-visible {
  background: #b9ff45;
  color: #121212;
}
.demo-hub-page .qow-to-top:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.demo-hub-page .qow-to-top svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 760px) {
  .demo-hub-page .qow-to-top {
    right: 16px;
    bottom: 16px;
  }
}

/* marketing: "where the work happens" strip and process photo */
.demo-hub-page .demo-site--taylorreed .mk .mk-room { background: #fff; }
.demo-hub-page .demo-site--taylorreed .mk .mk-room__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.demo-hub-page .demo-site--taylorreed .mk .mk-room__grid figure { margin: 0; overflow: hidden; border: 1px solid var(--mk-line); border-radius: 6px; background: var(--mk-paper); }
.demo-hub-page .demo-site--taylorreed .mk .mk-room__grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.demo-hub-page .demo-site--taylorreed .mk .mk-room__grid figcaption { display: grid; gap: 4px; padding: 16px 18px 20px; }
.demo-hub-page .demo-site--taylorreed .mk .mk-room__grid figcaption b { font-family: var(--mk-display); font-size: 1.35rem; font-weight: 400; letter-spacing: -0.02em; }
.demo-hub-page .demo-site--taylorreed .mk .mk-room__grid figcaption span { color: var(--mk-muted); font-size: 0.95rem; }
.demo-hub-page .demo-site--taylorreed .mk .mk-process__photo { margin: 32px 0 0; overflow: hidden; border-radius: 6px; }
.demo-hub-page .demo-site--taylorreed .mk .mk-process__photo img { display: block; width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
@media (max-width: 760px) {
  .demo-hub-page .demo-site--taylorreed .mk .mk-room__grid { grid-template-columns: minmax(0, 1fr); }
  .demo-hub-page .demo-site--taylorreed .mk .mk-process__photo img { aspect-ratio: 4 / 3; }
}

/* marketing: photos shown whole, side by side, and no double white gap */
.demo-hub-page .demo-site--taylorreed .mk .mk-room__grid img { aspect-ratio: 1 / 1; }
.demo-hub-page .demo-site--taylorreed .mk .mk-room { padding-bottom: clamp(24px, 3vw, 40px); }
.demo-hub-page .demo-site--taylorreed .mk .mk-room + .mk-help { padding-top: 0; }
@media (min-width: 900px) {
  .demo-hub-page .demo-site--taylorreed .mk .mk-case { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; }
  .demo-hub-page .demo-site--taylorreed .mk .mk-case > * { grid-column: 1; }
  .demo-hub-page .demo-site--taylorreed .mk .mk-case > .mk-case__img { grid-column: 2; grid-row: 1 / span 6; aspect-ratio: 1 / 1; align-self: start; }
}
@media (max-width: 899px) {
  .demo-hub-page .demo-site--taylorreed .mk .mk-case__img { aspect-ratio: 1 / 1; max-width: 520px; }
}
.demo-hub-page .demo-site--taylorreed .mk .mk-room__grid img { height: auto; }
@media (min-width: 900px) {
  .demo-hub-page .demo-site--taylorreed .mk .mk-case { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .demo-hub-page .demo-site--taylorreed .mk .mk-case .mk-big b { font-size: clamp(2.4rem, 4vw, 3.8rem); }
  .demo-hub-page .demo-site--taylorreed .mk .mk-case__text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}