/* Brand colours from the supplied Creatx Hub company profile. */
:root {
  --brand-purple: #1e0a4a;
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #2a0c6b;
  --muted: #3a2f57;
  --purple: #2a0c6b;
  --purple-dark: var(--brand-purple);
  --brand-violet: #8b5cf6;
  --brand-lavender: #b79dfa;
  --pale: #f6f3fc;
  --line: #dcd2f7;
  --dark: #1e0a4a;
}

.site-header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 110px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  color: #ffffff;
}
.site-header.scrolled {
  position: fixed;
  height: 80px;
  background: var(--brand-purple);
  border-bottom: 1px solid #b79dfa26;
  backdrop-filter: blur(18px);
}
.header-inner, .hero-inner { width: min(1280px, calc(100% - 144px)); }
.brand-wordmark { display: inline-flex; align-items: center; line-height: 1; letter-spacing: -1.7px; }
.brand-name { color: #ffffff; font-size: 35px; font-weight: 600; }
.brand-hub { color: #b79dfa; font-size: 35px; font-weight: 400; }
.brand-star { width: 22px; height: 22px; margin: 0 3px 0 2px; fill: #ffffff; flex: none; }
.main-nav { gap: 34px; font-size: 12px; }
.main-nav > a:not(.button) { color: #dcd2f7; }
.main-nav > a:not(.button)::after { background: #b79dfa; }
.main-nav > a:not(.button):hover { color: #ffffff; }
.main-nav .nav-cta { border: 1px solid #b79dfa55; border-radius: 30px; background: #8b5cf6; color: #ffffff; padding: 10px 22px; font-size: 12px; min-height: 42px; margin-left: 12px; font-weight: 400; }
.main-nav .nav-cta:hover { background: #8b5cf6; }

.hero.hero-reference {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 720px;
  padding: 193px 0 100px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-purple);
  color: #ffffff;
}
.hero-reference .hero-inner { position: relative; z-index: 2; }
.hero-reference .hero-copy { max-width: 1100px; }
.hero-reference h1 { font-size: clamp(51px, 5.35vw, 78px); font-weight: 600; line-height: 1.13; letter-spacing: -1.5px; margin: 0 0 25px; color: #ffffff; }
.hero-second-line { display: block; color: #b79dfa; }
.hero-reference .hero-description { max-width: 770px; color: #dcd2f7; font-size: 18px; line-height: 1.65; }
.hero-reference .hero-actions { margin-top: 38px; gap: 32px; }
.hero-reference .hero-primary { background: #ffffff; color: var(--brand-purple); min-height: 51px; padding: 13px 28px; border-radius: 30px; font-size: 14px; font-weight: 600; }
.hero-reference .hero-primary:hover { background: #f6f3fc; box-shadow: 0 9px 25px #1e0a4a26; }
.hero-reference .hero-secondary { font-size: 14px; color: #dcd2f7; font-weight: 400; position: relative; }
.hero-reference .hero-secondary::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: #b79dfa; transition: width .2s; }
.hero-reference .hero-secondary:hover::after { width: 100%; }
.hero-brand-art { width: min(34vw, 460px); height: auto; position: absolute; right: 7%; top: 34%; z-index: 0; fill: none; stroke: #d9c9ff; stroke-width: .9; opacity: .18; transform: rotate(7deg); pointer-events: none; }
.hero-brand-art .brand-halo { fill: none; stroke: none; }

/* Carry the same violet and lavender palette through the existing sections. */
.intro-strip { background: #f6f3fc; }
.intro-strip p, .intro-strip-inner > span { color: #6b5e8f; }
.intro-strip p strong { color: #3a2f57; }
.expertise-card { border-color: #dcd2f7; }
.expertise-card li, .solution-card > p { color: #6b5e8f; }
.expertise-icon { background: #f6f3fc; }
.connected-section { background: #1e0a4a; }
.connected-copy h2 { color: #ffffff; }
.connected-copy > p:not(.eyebrow) { color: #dcd2f7; }
.system-node { background: var(--brand-purple); border-color: #6b5e8f; box-shadow: 0 0 0 5px #1e0a4a; }
.system-steps::before { background: #6b5e8f; }
.system-step strong { color: #ffffff; }
.system-step small, .system-step p { color: #b79dfa; }
.system-node .icon { color: #d9c9ff; }
.approach-section { background: #f6f3fc; }
.phase.active { background: #dcd2f7; }
.phase-list, .phase { border-color: #cfc3f2; }
.phase-panel { background: #ffffff; }
.phase-watermark { color: #f6f3fc; }
.partner-section { background: #f6f3fc; }
.partner-heading h2, .value h3 { color: var(--brand-purple); }
.partner-facts strong { color: var(--brand-purple); }
.contact-copy { background: #f6f3fc; }
.contact-copy::after { color: #d9c9ff; }
.contact-copy h2, .contact-email { color: var(--brand-purple); }
.contact-copy h2 > span { color: var(--brand-purple); }
.contact-copy > p:not(.eyebrow), .contact-phone { color: #6b5e8f; }
.footer-top > p, .footer-links { color: #6b5e8f; }
.detail-dialog h2 { color: var(--brand-purple); }

@media (min-width: 1600px) {
  .hero.hero-reference { min-height: 800px; }
  .hero-reference h1 { font-size: 82px; }
}
@media (max-width: 1150px) {
  .header-inner, .hero-inner { width: calc(100% - 96px); }
  .main-nav { gap: 26px; }
  .hero.hero-reference { min-height: 640px; padding: 182px 0 90px; }
  .hero-reference h1 { font-size: 60px; }
  .hero-brand-art { right: 3%; width: 37vw; top: 38%; }
}
@media (max-width: 900px) {
  .header-inner, .hero-inner { width: calc(100% - 64px); }
  .site-header { height: 94px; }
  .brand-name, .brand-hub { font-size: 30px; }
  .brand-star { width: 19px; height: 19px; margin-inline: 2px; }
  .main-nav { gap: 22px; }
  .main-nav .nav-cta { margin-left: 0; font-size: 11px; padding: 9px 16px; min-height: 38px; }
  .hero.hero-reference { min-height: 590px; padding: 168px 0 80px; }
  .hero-reference h1 { font-size: 49px; line-height: 1.16; letter-spacing: -1.1px; }
  .hero-reference .hero-description { font-size: 16px; }
  .hero-reference .hero-actions { margin-top: 29px; }
  .hero-reference .hero-primary { font-size: 13px; min-height: 47px; padding: 12px 24px; }
  .hero-reference .hero-secondary { font-size: 13px; }
  .hero-brand-art { right: 2%; width: 40vw; top: 43%; }
}
@media (max-width: 680px) {
  .site-header, .site-header.scrolled { height: 80px; }
  .header-inner, .hero-inner { width: calc(100% - 40px); }
  .brand-name, .brand-hub { font-size: 29px; }
  .brand-wordmark { letter-spacing: -1.3px; }
  .brand-star { width: 18px; height: 18px; margin-inline: 2px; }
  .menu-toggle { background: #b79dfa1a; border-color: #b79dfa55; }
  .menu-toggle span { background: #ffffff; }
  .main-nav { top: 79px; background: var(--brand-purple); border-color: #b79dfa44; box-shadow: 0 16px 30px #1e0a4a26; }
  .main-nav > a:not(.button) { border-color: #b79dfa33; color: #f6f3fc; font-size: 17px; }
  .main-nav .nav-cta { padding: 12px 22px; margin-top: 20px; font-size: 13px; }
  .hero.hero-reference { min-height: 660px; min-height: min(760px, 94svh); padding: 148px 0 100px; align-items: center; }
  .hero-reference .hero-copy { max-width: 540px; }
  .hero-reference h1 { font-size: clamp(35px, 8.7vw, 49px); line-height: 1.16; letter-spacing: -.7px; margin-bottom: 23px; }
  .hero-reference .hero-description { font-size: 15px; line-height: 1.8; max-width: 410px; color: #dcd2f7; }
  .hero-desktop-break { display: none; }
  .hero-reference .hero-actions { flex-wrap: wrap; gap: 24px; row-gap: 20px; margin-top: 31px; }
  .hero-reference .hero-primary { font-size: 12px; min-height: 45px; padding: 11px 23px; }
  .hero-reference .hero-secondary { font-size: 12px; }
  .hero-brand-art { width: 260px; right: -40px; top: auto; bottom: -30px; opacity: .13; }
}
@media (max-width: 360px) {
  .hero-reference h1 { font-size: 33px; }
  .hero.hero-reference { padding-top: 135px; padding-bottom: 85px; }
  .hero-reference .hero-actions { gap: 17px; }
  .hero-reference .hero-primary { padding-inline: 19px; }
}

/* Original logo and document palette applied to all components. */
.brand-logo { display:inline-flex; align-items:center; color:#ffffff; text-decoration:none; flex:none; }
.brand-logotype { display:inline-flex; align-items:baseline; font-size:32px; font-weight:600; letter-spacing:-1.5px; line-height:1; }
.brand-letter-mark { display:block; width:.7em; height:.7em; align-self:baseline; margin:0 .07em 0 .08em; transform:translateY(.023em); object-fit:contain; flex:none; }
.brand-logo-hub { font-weight:400; color:#b79dfa; }
.brand-logo-dark { color:#2a0c6b; }
.brand-logo-dark .brand-logo-hub { color:#6b5e8f; }
.main-nav .nav-cta { background:#b79dfa; color:#1e0a4a; border-color:#b79dfa; }
.main-nav .nav-cta:hover { background:#d9c9ff; color:#1e0a4a; }
.section-intro, .expertise-card > p, .expertise-card li, .solution-card > p, .phase-panel p, .about-lead, .about-body, .value p, .partner-description > p, .reference-grid p { color:#3a2f57; }
.eyebrow, .section-number, .card-link, .solution-card > .icon { color:#2a0c6b; }
.expertise-icon, .dialog-icon { background:#f6f3fc; color:#8b5cf6; }
.intro-strip, .approach-section, .partner-section, .solution-card:hover { background:#f6f3fc; }
.phase.active { background:#d9c9ff; color:#2a0c6b; }
.phase.active > span { color:#2a0c6b; }
.phase-panel, .contact-form, .detail-dialog { background:#ffffff; }
.solution-card, .expertise-card, .values-block { background:#f6f3fc; }
.expertise-icon { background:#ffffff; }
.solution-card:hover { background:#ffffff; border-color:#b79dfa; }
.solution-card, .expertise-card, .values-block, .contact-card, .phase, .phase-list, .value, .references, .partner-facts, .partner-facts > div, .reference-grid, .field input, .field textarea, .field select { border-color:#dcd2f7; }
.connected-copy .eyebrow, .connected-copy .section-number, .system-tick { color:#b79dfa; }
.contact-copy { background:#1e0a4a; color:#ffffff; }
.contact-brand-logo { width:44px; height:44px; margin-bottom:27px; }
.contact-copy .eyebrow { color:#dcd2f7; }
.contact-copy .eyebrow .status-dot { background:#b79dfa; }
.contact-copy h2, .contact-copy h2 > span, .contact-copy .contact-email, .contact-phone { color:#ffffff; }
.contact-copy > p:not(.eyebrow) { color:#dcd2f7; }
.contact-copy .contact-email .icon, .contact-location { color:#b79dfa; }
.contact-copy::after { color:#b79dfa; opacity:.2; }
.field label, .field input, .field textarea, .field select { color:#3a2f57; }
.field input, .field textarea, .field select { background-color:#f6f3fc; }
.field input::placeholder, .field textarea::placeholder, .form-note, .footer-bottom, .footer-bottom > a { color:#6b5e8f; }
@media(max-width:900px) {
 .brand-logotype { font-size:28px; }
}
@media(max-width:680px) {
 .brand-logotype { font-size:27px; }
 .main-nav { gap:0; background:#1e0a4a; }
 .menu-toggle { background:#1e0a4a; border-color:#b79dfa; }
 .footer-top .brand-logotype { font-size:25px; }
}

/* Partner statistics match the supplied four-card reference. */
.partner-facts { gap:16px; padding-top:0; border-top:0; }
.partner-facts > div { background:#2a0c6b; color:#ffffff; padding:24px; border:0; border-radius:0; min-height:176px; gap:10px; }
.partner-facts strong { color:#ffffff; font-size:41px; font-weight:600; letter-spacing:-1px; line-height:1.1; }
.partner-facts span { color:#ffffff; font-size:13px; line-height:1.6; max-width:none; }
@media(max-width:900px) {
 .partner-facts { gap:14px; }
 .partner-facts > div { padding:20px 17px; }
 .partner-facts strong { font-size:34px; }
 .partner-facts span { font-size:11px; }
}
@media(max-width:680px) {
 .partner-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
 .partner-facts > div { padding:20px 17px; min-height:170px; }
 .partner-facts strong { font-size:34px; }
 .partner-facts span { font-size:11px; }
}