/* Homepage-only real Victoria Harbour photo hero + first-viewport marquee. */
body.home.moxie-cn-site {
  --hero-ivory: #fff8f2;
  --hero-orange: #f4510b;
  --hero-orange-deep: #bb3505;
  /* Reinforce sitewide fixed-header reserve (cn-site.css) so hero never slides under nav. */
  padding-top: var(--header-height, 80px);
}

.moxie-cn-site .cn-home-hero {
  --hero-trust-reserve: 132px;
  /* Must match fixed .site-header height — do not use a shorter ad-hoc value. */
  --hero-header-reserve: var(--header-height, 80px);
  /* Vertical rhythm: breathe between eyebrow → H1 → lead → CTAs → proof.
     vh clamps keep one-screen desktop feasible without cramped collisions. */
  --hero-pad-top: clamp(40px, 5.8vh, 64px);
  --hero-pad-bottom: clamp(28px, 3.8vh, 44px);
  --hero-gap-eyebrow: clamp(20px, 2.5vh, 28px);
  --hero-gap-lead: clamp(22px, 2.8vh, 32px);
  --hero-gap-actions: clamp(26px, 3.2vh, 36px);
  --hero-gap-footer: clamp(28px, 3.6vh, 44px);
  --hero-actions-gap: 14px;
  position: relative;
  z-index: 0;
  /* Remaining viewport under fixed header, leaving room for Success Clients marquee. */
  min-height: calc(100vh - var(--hero-header-reserve) - var(--hero-trust-reserve));
  min-height: calc(100svh - var(--hero-header-reserve) - var(--hero-trust-reserve));
  max-height: calc(100svh - var(--hero-header-reserve) - var(--hero-trust-reserve));
  overflow: hidden;
  overflow-x: clip;
  background: var(--hero-orange-deep);
  color: var(--hero-ivory);
  isolation: isolate;
}

.cn-home-hero__media,
.cn-home-hero__veil,
.cn-home-hero__linework {
  position: absolute;
  inset: 0;
}

.cn-home-hero__media {
  z-index: -3;
  background: #c24a12;
}

.cn-home-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Orange veil: left wash for copy contrast; right shows real harbour skyline. */
.cn-home-hero__veil {
  z-index: -2;
  background:
    linear-gradient(
      90deg,
      rgba(187, 53, 5, 0.92) 0%,
      rgba(244, 81, 11, 0.78) 20%,
      rgba(244, 81, 11, 0.4) 36%,
      rgba(244, 81, 11, 0.12) 48%,
      rgba(244, 81, 11, 0.02) 58%,
      rgba(244, 81, 11, 0) 66%
    ),
    linear-gradient(
      180deg,
      rgba(40, 16, 6, 0.06) 0%,
      rgba(40, 16, 6, 0) 50%,
      rgba(40, 16, 6, 0.28) 100%
    );
}

.cn-home-hero__linework {
  z-index: -1;
  opacity: 0.28;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 248, 242, 0.22) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(rgba(255, 248, 242, 0.18), rgba(255, 248, 242, 0.18)) 0 calc(100% - 118px) / 100% 1px no-repeat;
  pointer-events: none;
}

.cn-home-hero__inner {
  display: flex;
  min-height: inherit;
  max-height: inherit;
  flex-direction: column;
  justify-content: flex-start;
  /* Fixed header cleared by body padding-top; pad for visual rhythm only. */
  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bottom);
  box-sizing: border-box;
}

.cn-home-hero__copy {
  display: flex;
  width: min(760px, 64vw);
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  gap: 0;
}

/* Short viewports: top-align copy; shrink type so hero + trust stay one screen. */
@media (max-height: 780px) {
  .moxie-cn-site .cn-home-hero {
    --hero-pad-top: clamp(24px, 3.4vh, 36px);
    --hero-pad-bottom: clamp(18px, 2.6vh, 28px);
    --hero-gap-eyebrow: 14px;
    --hero-gap-lead: 16px;
    --hero-gap-actions: 18px;
    --hero-gap-footer: 18px;
  }

  .cn-home-hero__copy {
    justify-content: flex-start;
    padding-top: 8px;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__title {
    font-size: clamp(2.15rem, 1.2rem + 1.45vw, 2.85rem);
    line-height: 1.1;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__lead {
    font-size: clamp(0.92rem, 1vw, 1.02rem);
    line-height: 1.6;
  }
}

.cn-home-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--hero-gap-eyebrow);
  color: rgba(255, 248, 242, 0.86);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.cn-home-hero__eyebrow::before {
  width: 34px;
  height: 1px;
  background: rgba(255, 248, 242, 0.85);
  content: "";
}

.cn-home-hero__eyebrow span {
  color: #ffe3d0;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.moxie-cn-site .cn-home-hero .cn-hero__title {
  max-width: 100%;
  color: var(--hero-ivory);
  /*
   * Single fluid scale across laptop → ultrawide.
   * Avoid a second clamp under ≤1060 that peaked ABOVE desktop
   * (was ~62px at 1060 then jumped DOWN to ~48px at 1061).
   */
  font-size: clamp(2.35rem, 1.35rem + 1.85vw, 3.55rem);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.055em;
  text-shadow: 0 2px 28px rgba(80, 24, 4, 0.35);
  text-wrap: balance;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
}

.cn-home-hero__title-line {
  display: block;
  max-width: 100%;
}

/* Desktop: keep each title row as one visual line. */
@media (min-width: 681px) {
  .cn-home-hero__title-line {
    white-space: nowrap;
  }
}

.cn-home-hero__pipe {
  display: inline;
  margin: 0 0.06em;
}

.moxie-cn-site .cn-home-hero .cn-hero__lead {
  max-width: 640px;
  margin-top: var(--hero-gap-lead);
  color: rgba(255, 248, 242, 0.92);
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.7;
  text-shadow: 0 1px 16px rgba(80, 24, 4, 0.28);
}

.moxie-cn-site .cn-home-hero .cn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-actions-gap);
  margin-top: var(--hero-gap-actions);
}

.cn-home-hero .btn {
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 0;
}

.cn-home-hero .btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--hero-orange-deep);
}

.cn-home-hero .btn--light:hover {
  background: #fff3e8;
  border-color: #fff3e8;
  color: var(--hero-orange-deep);
}

.cn-home-hero .btn--outline-light {
  border-color: rgba(255, 248, 242, 0.72);
  color: var(--hero-ivory);
  backdrop-filter: blur(8px);
  background: rgba(120, 40, 8, 0.18);
}

.cn-home-hero .btn--outline-light:hover {
  background: var(--hero-ivory);
  border-color: var(--hero-ivory);
  color: var(--hero-orange-deep);
}

.cn-home-hero .btn:focus-visible {
  outline: 3px solid var(--hero-ivory);
  outline-offset: 4px;
}

.cn-home-hero__footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: end;
  /* Keep stats clear of centered copy; do not compete with logo marquee below. */
  margin-top: var(--hero-gap-footer);
}

.moxie-cn-site .cn-home-hero .cn-hero__proof {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.moxie-cn-site .cn-home-hero .cn-hero__proof li {
  min-width: 140px;
  padding: 0 22px;
  border-right: 0;
  border-left: 1px solid rgba(255, 248, 242, 0.32);
}

.moxie-cn-site .cn-home-hero .cn-hero__proof strong {
  color: var(--hero-ivory);
  font-size: 1.14rem;
  font-weight: 620;
}

.moxie-cn-site .cn-home-hero .cn-hero__proof span {
  color: rgba(255, 248, 242, 0.78);
}

/* Compact Success Clients strip so it fits the first viewport with hero. */
body.home.moxie-cn-site .cn-trust__inner {
  padding-top: 18px;
  padding-bottom: 18px;
}

body.home.moxie-cn-site .cn-trust__inner > p {
  margin-bottom: 14px;
}

/*
 * Homepage header: solid fixed white bar above hero (never immersive / never under hero).
 * Overrides main.css transparent “immersive” home header.
 */
body.home.moxie-cn-site .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height, 80px);
  background: #ffffff;
  border-bottom: 1px solid rgba(65, 31, 17, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Keep logo / nav / WhatsApp CTA on one vertical centerline. */
body.home.moxie-cn-site .site-header__inner,
body.home.moxie-cn-site .moxie-cn-nav,
body.home.moxie-cn-site .moxie-cn-nav__list {
  align-items: center;
}

body.home.moxie-cn-site .moxie-cn-nav__social {
  align-self: center;
}

body.home.moxie-cn-site .moxie-cn-nav__cta.btn,
body.home.moxie-cn-site .moxie-cn-nav__cta.btn--primary,
body.home.moxie-cn-site .site-nav__cta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1.15;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__ig,
body.home.moxie-cn-site .site-header.is-scrolled .moxie-cn-nav__ig {
  border-color: rgba(244, 81, 11, 0.22);
  background: #fff;
  color: var(--hero-orange, var(--cn-orange));
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__ig:hover,
body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__ig:focus-visible,
body.home.moxie-cn-site .site-header.is-scrolled .moxie-cn-nav__ig:hover,
body.home.moxie-cn-site .site-header.is-scrolled .moxie-cn-nav__ig:focus-visible {
  background: #fff8f3;
  border-color: var(--hero-orange, var(--cn-orange));
  color: var(--hero-orange-deep, var(--cn-orange-deep));
}

body.home.moxie-cn-site .site-header:not(.is-scrolled),
body.home.moxie-cn-site .site-header.is-scrolled {
  background: #ffffff;
  border-bottom-color: rgba(65, 31, 17, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .site-logo__img--light {
  opacity: 1;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .site-logo__img--dark {
  opacity: 0;
  filter: none;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__list a {
  color: #24150f;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__list a:hover,
body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__list a:focus-visible {
  color: var(--hero-orange);
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__cta.btn,
body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__cta.btn--primary,
body.home.moxie-cn-site .site-header:not(.is-scrolled) .site-nav__cta {
  background: var(--hero-orange) !important;
  border: 1px solid var(--hero-orange) !important;
  color: #fff !important;
  box-shadow: none;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__cta.btn:hover,
body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-cn-nav__cta.btn--primary:hover,
body.home.moxie-cn-site .site-header:not(.is-scrolled) .site-nav__cta:hover {
  background: var(--hero-orange-deep) !important;
  border-color: var(--hero-orange-deep) !important;
  color: #fff !important;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .site-header__toggle {
  color: #24150f;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-lang__current,
body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-lang__link {
  color: #24150f;
}

body.home.moxie-cn-site .site-header:not(.is-scrolled) .moxie-lang__sep {
  color: rgba(36, 21, 15, 0.35);
}

@media (max-width: 1060px) {
  .moxie-cn-site .cn-home-hero {
    --hero-trust-reserve: 128px;
    --hero-header-reserve: var(--header-height, 80px);
    --hero-pad-top: clamp(36px, 5vh, 52px);
    --hero-pad-bottom: clamp(26px, 3.5vh, 38px);
    --hero-gap-eyebrow: 20px;
    --hero-gap-lead: 22px;
    --hero-gap-actions: 26px;
    --hero-gap-footer: 28px;
    /* Keep one-screen when tall enough; drop cap on short tablets to avoid clip. */
    max-height: calc(100svh - var(--hero-header-reserve) - var(--hero-trust-reserve));
  }

  .cn-home-hero__media img {
    object-position: 58% 40%;
  }

  .cn-home-hero__veil {
    background:
      linear-gradient(
        90deg,
        rgba(187, 53, 5, 0.92) 0%,
        rgba(244, 81, 11, 0.72) 28%,
        rgba(244, 81, 11, 0.28) 46%,
        rgba(244, 81, 11, 0.06) 60%,
        rgba(244, 81, 11, 0) 72%
      ),
      linear-gradient(180deg, rgba(40, 16, 6, 0.08) 0%, rgba(40, 16, 6, 0) 50%, rgba(40, 16, 6, 0.3) 100%);
  }

  .cn-home-hero__copy {
    width: min(720px, 100%);
  }

  /* Title continues the same fluid scale — do not re-clamp larger than desktop. */

  .cn-home-hero__footer {
    justify-content: flex-start;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__proof {
    width: 100%;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__proof li {
    min-width: 0;
  }
}

/* Short + mid width: never clip hero copy under max-height. */
@media (max-width: 1060px) and (max-height: 780px) {
  .moxie-cn-site .cn-home-hero {
    max-height: none;
  }
}

/* Tablet (~768–1024): keep stack readable without header/copy collision. */
@media (max-width: 768px) {
  .moxie-cn-site .cn-home-hero {
    --hero-pad-top: 36px;
    --hero-pad-bottom: 28px;
    --hero-gap-eyebrow: 18px;
    --hero-gap-lead: 20px;
    --hero-gap-actions: 24px;
    --hero-gap-footer: 26px;
  }

  .cn-home-hero__copy {
    width: min(640px, 100%);
  }
}

@media (max-width: 680px) {
  .moxie-cn-site .cn-home-hero {
    --hero-trust-reserve: 120px;
    --hero-header-reserve: var(--header-height, 80px);
    --hero-pad-top: 36px;
    --hero-pad-bottom: 28px;
    --hero-gap-eyebrow: 18px;
    --hero-gap-lead: 20px;
    --hero-gap-actions: 24px;
    --hero-gap-footer: 28px;
    --hero-actions-gap: 12px;
    min-height: min(640px, calc(100svh - var(--hero-header-reserve) - var(--hero-trust-reserve)));
    max-height: none;
  }

  .cn-home-hero__media img {
    object-position: 64% 38%;
  }

  .cn-home-hero__veil {
    background:
      linear-gradient(
        100deg,
        rgba(187, 53, 5, 0.9) 0%,
        rgba(244, 81, 11, 0.7) 34%,
        rgba(244, 81, 11, 0.22) 58%,
        rgba(244, 81, 11, 0.04) 72%,
        rgba(244, 81, 11, 0) 84%
      ),
      linear-gradient(180deg, rgba(40, 16, 6, 0.1) 0%, rgba(40, 16, 6, 0) 52%, rgba(40, 16, 6, 0.34) 100%);
  }

  .cn-home-hero__linework {
    background: linear-gradient(rgba(255, 248, 242, 0.16), rgba(255, 248, 242, 0.16)) 0 calc(100% - 132px) / 100% 1px no-repeat;
  }

  .cn-home-hero__inner {
    min-height: inherit;
    max-height: none;
  }

  .cn-home-hero__copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding-top: 4px;
  }

  .cn-home-hero__eyebrow {
    gap: 10px;
    font-size: 0.67rem;
    letter-spacing: 0.07em;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .cn-home-hero__eyebrow::before {
    width: 22px;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__title {
    /* Fit phrase chunks inside ~390px content width (container − gutters). */
    font-size: clamp(1.5rem, 6.6vw, 1.95rem);
    line-height: 1.22;
    letter-spacing: -0.04em;
    max-width: 100%;
  }

  .cn-home-hero__title-line {
    white-space: normal;
  }

  /* Phrase units stay intact; wrap only between chunks (after ｜). */
  .moxie-cn-site .cn-home-hero .cn-hero__title .nobr {
    white-space: nowrap;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__lead {
    max-width: 100%;
    font-size: 0.94rem;
    line-height: 1.68;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 100%;
    min-width: 0;
  }

  .cn-home-hero .btn {
    width: 100%;
    justify-content: center;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__proof {
    grid-template-columns: 0.78fr 0.92fr 1.3fr;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__proof li {
    padding: 0 10px;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__proof li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__proof strong {
    font-size: 0.98rem;
  }

  .moxie-cn-site .cn-home-hero .cn-hero__proof span {
    font-size: 0.68rem;
    line-height: 1.45;
  }

  body.home.moxie-cn-site .cn-trust__inner {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

@media (max-width: 370px) {
  .moxie-cn-site .cn-home-hero .cn-hero__title {
    font-size: 1.42rem;
    line-height: 1.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cn-home-hero *,
  .cn-home-hero *::before,
  .cn-home-hero *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}