/* Final shared layout rules: consistent rhythm, aligned content, natural images. */
html body.theme-vibrant { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html body.theme-vibrant *, html body.theme-vibrant *::before, html body.theme-vibrant *::after { box-sizing: border-box; }
html body.theme-vibrant main#main :is(h1,h2,h3,p,figure,article,li) { min-width: 0; }
html body.theme-vibrant main#main :is(h1,h2,h3) { text-align: left; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
html body.theme-vibrant main#main h1 { line-height: 1.12 !important; letter-spacing: -.045em !important; }
html body.theme-vibrant main#main h2 { line-height: 1.18 !important; letter-spacing: -.035em !important; }
html body.theme-vibrant main#main h3 { line-height: 1.35 !important; letter-spacing: -.025em !important; }
html body.theme-vibrant main#main p { line-height: 1.75 !important; text-wrap: pretty; }
html body.theme-vibrant main#main .section { padding-block: clamp(40px,5vw,76px) !important; }
html body.theme-vibrant main#main .section-head {
  display: grid !important; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr) !important;
  align-items: end !important; gap: 24px 48px !important; margin-bottom: 32px !important;
}
html body.theme-vibrant main#main .section-head h2 { margin: 10px 0 0 !important; max-width: 24ch; }
html body.theme-vibrant main#main .section-head>p { margin: 0 !important; padding: 0 !important; max-width: 54ch !important; border-left: 0 !important; justify-self: end; }
html body.theme-vibrant main#main :is(.page-hero,.case-hero) { padding: clamp(28px,4vw,56px) !important; margin-block: 28px 36px !important; }
html body.theme-vibrant main#main :is(.page-hero,.case-hero) h1 { margin: 20px 0 24px !important; max-width: 24ch; }
html body.theme-vibrant main#main :is(.page-hero,.case-hero)>p { max-width: 68ch !important; margin-bottom: 0 !important; }
html body.theme-vibrant main#main :is(.story-grid,.collection-grid,.home-service-grid,.service-offers,.depth-grid,.profile-detail-grid,.live-grid,.outcome-grid,.collaboration-grid,.opportunity-grid,.service-detail-grid,.impact-number-grid) { gap: 24px !important; align-items: stretch !important; }
html body.theme-vibrant main#main :is(.home-service,.service-offers>article,.depth-grid>article,.profile-detail-grid>article,.outcome-card,.collaboration-grid>article,.opportunity-grid>a,.service-detail-grid>article) {
  padding: clamp(24px,2.2vw,32px) !important; border-radius: 20px !important;
  display: flex !important; flex-direction: column !important; height: 100% !important;
}
html body.theme-vibrant main#main :is(.home-service,.service-offers>article,.depth-grid>article,.profile-detail-grid>article,.collaboration-grid>article,.opportunity-grid>a,.service-detail-grid>article) h3 { margin: 14px 0 12px !important; }
html body.theme-vibrant main#main :is(.home-service,.service-offers>article,.depth-grid>article,.profile-detail-grid>article,.collaboration-grid>article,.opportunity-grid>a,.service-detail-grid>article) p { margin: 0 0 20px !important; font-size: 15px !important; }
html body.theme-vibrant main#main :is(.home-card-link,.service-offers>article>.text-link,.opportunity-grid>a>.story-cta,.service-detail-grid>article>.text-link) { margin-top: auto !important; padding-top: 16px !important; }
html body.theme-vibrant main#main .home-service-icon { margin-bottom: 8px !important; flex-shrink: 0; }
html body.theme-vibrant main#main .story-card { display: flex !important; flex-direction: column !important; border-radius: 20px !important; height: 100% !important; }
html body.theme-vibrant main#main .story-card figure { width: 100% !important; margin: 0 !important; aspect-ratio: 16/10 !important; height: auto !important; min-height: 0 !important; flex: none !important; }
html body.theme-vibrant main#main .story-card figure img:not(.release-crop img) { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }
html body.theme-vibrant main#main .story-copy { display: flex !important; flex-direction: column !important; flex: 1 !important; padding: 28px !important; }
html body.theme-vibrant main#main .story-copy h3 { min-height: 0 !important; margin: 16px 0 12px !important; font-size: clamp(22px,2vw,28px) !important; }
html body.theme-vibrant main#main .story-copy p { margin: 0 0 24px !important; }
html body.theme-vibrant main#main .story-copy .story-cta { margin-top: auto !important; padding-top: 16px !important; }
html body.theme-vibrant main#main .collection-card { display: flex !important; flex-direction: column !important; height: 100% !important; }
html body.theme-vibrant main#main .collection-art { height: auto !important; aspect-ratio: 16/10 !important; flex: none !important; }
html body.theme-vibrant main#main .collection-art img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
html body.theme-vibrant main#main .collection-caption { padding: 28px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; }
html body.theme-vibrant main#main .collection-caption h3 { margin: 12px 0 !important; }
html body.theme-vibrant main#main .live-copy { padding: 28px !important; }
html body.theme-vibrant main#main .live-image img { width: 100% !important; aspect-ratio: 16/10 !important; object-fit: contain !important; background: #f4f4f1; }
html body.theme-vibrant main#main .media-grid :is(img,video) { max-width: 100% !important; height: auto !important; object-fit: contain !important; }
html body.theme-vibrant main#main :is(.record-grid img,.evidence-art img,.project-gallery img) { max-width: 100% !important; object-fit: contain !important; }
html body.theme-vibrant main#main .company-logo-grid .logo-stage img { object-fit: contain !important; width: auto !important; height: auto !important; }
html body.theme-vibrant main#main .track-node img { object-fit: contain !important; }
html body.theme-vibrant main#main .portfolio-brandboard { background: #fff !important; border-color: #deded9 !important; }
html body.theme-vibrant main#main .portfolio-brandboard :is(p,small) { color: #555b4c !important; }
html body.theme-vibrant main#main .portfolio-brandboard .eyebrow { color: #435800 !important; }
html body.theme-vibrant main#main .track-record { background: #171a14 !important; }
html body.theme-vibrant main#main .track-record :is(h2,h3) { color: #fff !important; }
html body.theme-vibrant main#main .track-record :is(p,li,.track-date) { color: #d1d6c6 !important; }
html body.theme-vibrant main#main .track-record .eyebrow { color: #cff128 !important; }
html body.theme-vibrant main#main .track-record .text-link { color: #cff128 !important; }
html body.theme-vibrant main#main .track-timeline>li:nth-child(even) .track-copy :is(h3,p) { text-align: right; }
html body.theme-vibrant main#main .venture-feature { align-items: center !important; gap: 40px !important; padding: clamp(26px,3.5vw,48px) !important; }
html body.theme-vibrant main#main .venture-intro>p { max-width: 62ch; }
html body.theme-vibrant main#main .venture-scope { padding: 28px !important; height: auto !important; }
html body.theme-vibrant main#main .venture-scope article { padding-block: 20px !important; }
html body.theme-vibrant main#main .enquiry-section { align-items: start !important; gap: 48px !important; }
html body.theme-vibrant main#main .enquiry-form { padding: 32px !important; }
html body.theme-vibrant main#main .enquiry-fields { gap: 20px !important; }
html body.theme-vibrant main#main .enquiry-form :is(input,select,textarea) { width: 100% !important; font-size: 16px !important; }
html body.theme-vibrant .modern-footer { padding: 40px 32px 24px !important; }
html body.theme-vibrant .footer-invitation { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 24px !important; }
html body.theme-vibrant .footer-invitation h2 { grid-column: 1 !important; max-width: 28ch; margin: 12px 0 !important; }
html body.theme-vibrant .footer-invitation p { grid-column: 1 !important; margin: 0 !important; }
html body.theme-vibrant .footer-invitation .footer-contact { grid-column: 2 !important; grid-row: 1/5 !important; align-self: center !important; }
html body.theme-vibrant.page-home main#main #introduction { align-items: center !important; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr) !important; padding: 40px !important; }
html body.theme-vibrant.page-home main#main #introduction .hero-narrative { max-width: 900px; }
html body.theme-vibrant.page-home main#main #introduction h1 { height: auto !important; min-height: 0 !important; margin: 24px 0 !important; line-height: 1.1 !important; font-size: clamp(42px,4.2vw,72px) !important; }
html body.theme-vibrant.page-home main#main #introduction .hero-heading-line { display: block !important; }
html body.theme-vibrant.page-home main#main #introduction .acquisition-intro { max-width: 55ch !important; font-size: 17px !important; }
html body.theme-vibrant.page-home main#main #introduction .hero-actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin-block: 24px !important; }
html body.theme-vibrant.page-home main#main #introduction .hero-actions :is(.acquisition-primary,.acquisition-secondary,.acquisition-cv) { min-height: 50px !important; padding: 12px 20px !important; display: inline-flex !important; align-items: center !important; border-radius: 10px !important; font-size: 13px !important; margin: 0 !important; text-decoration: none !important; }
html body.theme-vibrant.page-home main#main #introduction .portrait-showcase { max-width: 560px !important; align-self: center !important; }
html body.theme-vibrant.page-home main#main #introduction .showcase-photo img { border-radius: 0 !important; }
html body.theme-vibrant.page-home main#main #introduction .showcase-photo figcaption strong { text-align: center !important; }
html body.theme-vibrant.page-home main#main #introduction .acquisition-journey { grid-column: 1/-1 !important; margin-top: 8px !important; padding-top: 22px !important; flex-wrap: wrap !important; }
@media(min-width:851px) {
  html body.theme-vibrant main#main :is(.story-copy,.home-service,.service-offers>article,.outcome-card,.collaboration-grid>article) h3 { min-height: 2.7em !important; }
  html body.theme-vibrant main#main :is(.home-service-grid,.service-offers,.outcome-grid,.collaboration-grid,.opportunity-grid) { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media(max-width:1000px) and (min-width:851px) {
  html body.theme-vibrant.page-home main#main #introduction { padding: 30px !important; gap: 28px !important; }
  html body.theme-vibrant.page-home main#main #introduction h1 { font-size: 42px !important; }
  html body.theme-vibrant main#main :is(.home-service-grid,.service-offers,.collaboration-grid) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:850px) {
  html body.theme-vibrant.page-home main#main #introduction { grid-template-columns: 1fr !important; padding: 28px !important; gap: 24px !important; }
  html body.theme-vibrant main#main .section-head { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 28px !important; }
  html body.theme-vibrant main#main .section-head>p { justify-self: start !important; max-width: 62ch !important; }
  html body.theme-vibrant main#main :is(.venture-feature,.enquiry-section,.detail-opening,.detail-links) { grid-template-columns: 1fr !important; gap: 28px !important; }
  html body.theme-vibrant main#main :is(.story-grid,.collection-grid,.home-service-grid,.service-offers,.depth-grid,.profile-detail-grid,.live-grid) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 20px !important; }
}
@media(max-width:600px) {
  html body.theme-vibrant .wrap { padding-inline: 16px !important; }
  html body.theme-vibrant main#main :is(.story-grid,.collection-grid,.home-service-grid,.service-offers,.depth-grid,.profile-detail-grid,.live-grid,.service-detail-grid,.outcome-grid,.collaboration-grid,.opportunity-grid,.impact-number-grid) { grid-template-columns: 1fr !important; gap: 18px !important; }
  html body.theme-vibrant main#main :is(.page-hero,.case-hero) { padding: 26px 22px !important; border-radius: 22px !important; }
  html body.theme-vibrant main#main h1 { font-size: clamp(30px,8.5vw,40px) !important; }
  html body.theme-vibrant main#main h2 { font-size: 30px !important; }
  html body.theme-vibrant main#main .story-copy, html body.theme-vibrant main#main .collection-caption { padding: 24px !important; }
  html body.theme-vibrant main#main .track-timeline>li:nth-child(even) .track-copy :is(h3,p) { text-align: left !important; }
  html body.theme-vibrant main#main .enquiry-form { padding: 24px !important; }
  html body.theme-vibrant .modern-footer { padding: 28px 22px 20px !important; }
  html body.theme-vibrant .footer-invitation { display: flex !important; flex-direction: column !important; align-items: start !important; gap: 16px !important; }
  html body.theme-vibrant .footer-invitation .footer-contact { align-self: start !important; }
  html body.theme-vibrant.page-home main#main #introduction { padding: 26px 20px !important; gap: 18px !important; }
  html body.theme-vibrant.page-home main#main #introduction h1 { font-size: clamp(32px,8.8vw,44px) !important; letter-spacing: -.045em !important; margin-block: 14px !important; }
  html body.theme-vibrant.page-home main#main #introduction .acquisition-intro { font-size: 15px !important; }
  html body.theme-vibrant.page-home main#main #introduction .hero-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  html body.theme-vibrant.page-home main#main #introduction .hero-actions .acquisition-primary { grid-column: 1/-1 !important; justify-content: space-between !important; }
  html body.theme-vibrant.page-home main#main #introduction .hero-actions :is(.acquisition-secondary,.acquisition-cv) { font-size: 11px !important; justify-content: center !important; padding-inline: 8px !important; width: 100% !important; }
  html body.theme-vibrant.page-home main#main #introduction .portrait-showcase { padding-inline: 20px !important; margin-top: 0 !important; }
  html body.theme-vibrant.page-home main#main #introduction .showcase-results { left: 20px !important; right: 20px !important; }
  html body.theme-vibrant.page-home main#main #introduction .showcase-result { width: 112px !important; padding: 12px !important; min-height: 78px !important; }
  html body.theme-vibrant.page-home main#main #introduction .result-leads { right: -20px !important; }
  html body.theme-vibrant.page-home main#main #introduction .result-projects { left: -20px !important; }
  html body.theme-vibrant.page-home main#main #introduction .result-spend { right: -20px !important; width: 126px !important; }
  html body.theme-vibrant.page-home main#main #introduction .showcase-result strong { font-size: 24px !important; }
  html body.theme-vibrant.page-home main#main #introduction .showcase-note { margin-inline: -10px !important; }
}

/* Surface-specific contrast pairs override the earlier legacy color rules. */
html body.theme-vibrant main#main .pill,
html body.theme-vibrant main#main .pill:hover {
  background: #cff128 !important; border-color: #cff128 !important; color: #141414 !important;
}
html body.theme-vibrant main#main .pill :is(span,b,strong) { color: #141414 !important; background: transparent !important; }
html body.theme-vibrant main#main .case-navigation a { color: #435800 !important; background: #f4f5ed !important; border-color: #dce2c4 !important; }
html body.theme-vibrant main#main .case-navigation a:hover { color: #141414 !important; background: #cff128 !important; }
html body.theme-vibrant main#main .career-process-grid article { background: #171a14 !important; }
html body.theme-vibrant main#main .career-process-grid :is(h3,strong) { color: #fff !important; }
html body.theme-vibrant main#main .career-process-grid p { color: #d4d6ca !important; }
html body.theme-vibrant main#main .career-process-grid article>span { color: #cff128 !important; }
html body.theme-vibrant main#main .visual-story figcaption { background: #171a14 !important; color: #e6e9df !important; }
html body.theme-vibrant main#main .teacher-intro :is(h2,h3,strong) { color: #141414 !important; }
html body.theme-vibrant main#main .teacher-intro p { color: #555b4c !important; }
html body.theme-vibrant main#main .teacher-intro .text-link { color: #435800 !important; }
html body.theme-vibrant main#main :is(.audience-routes>a>span,.collection-caption>span,.about-principles article>span,.insight-label) { color: #435800 !important; }
html body.theme-vibrant main#main :is(.contact-panel .detail-row>span,.about-facts>div>span,.about-portrait figcaption span,.freelance-grid article>span) { color: #555b4c !important; }
html body.theme-vibrant.page-home main#main #introduction .acquisition-journey b { color: #cff128 !important; }
html body.theme-vibrant main#main :is(.venture-feature,.shinchat-spotlight,.shinchat-owner-hero,.shinchat-brand-panel) .pill,
html body.theme-vibrant.page-shinchat main#main .pill { color: #fff !important; background: #57218d !important; border-color: #57218d !important; }
html body.theme-vibrant main#main :is(.venture-feature,.shinchat-spotlight,.shinchat-owner-hero,.shinchat-brand-panel) .pill:hover,
html body.theme-vibrant.page-shinchat main#main .pill:hover { background: #40126e !important; border-color: #40126e !important; }
html body.theme-vibrant main#main :is(.venture-feature,.shinchat-spotlight,.shinchat-owner-hero,.shinchat-brand-panel) .pill :is(span,b,strong),
html body.theme-vibrant.page-shinchat main#main .pill :is(span,b,strong) { color: #fff !important; }
html body.theme-vibrant.page-shinchat main#main .case-navigation a { color: #612c94 !important; background: #f4eefa !important; border-color: #ded0ed !important; }
html body.theme-vibrant.page-shinchat main#main .case-navigation a:hover { color: #fff !important; background: #57218d !important; }
html body.theme-vibrant.page-shinchat main#main .visual-story figcaption { color: #62516f !important; background: #f4eefa !important; }

html body.theme-vibrant.page-about main#main figcaption span { color: #555b4c !important; }
html body.theme-vibrant main#main :is(.ai-note>span,.brand-sector-list summary>span) { color: #435800 !important; }

/* Render the original purple logo with white pixels transparent, including
   inside opacity/transform stacking contexts created by entrance effects. */
html body.theme-vibrant main#main .shinchat-logo-frame img {
  filter: url('assets/logos/shinchat-display-filter.svg#transparent-white') !important;
  mix-blend-mode: normal !important;
}
html body.theme-vibrant main#main .shinchat-logo-frame,
html body.theme-vibrant main#main .venture-intro { mix-blend-mode: normal !important; }