/* Page-wide editorial system: monochrome surfaces, orange accents and square media. */
.performance-site { --accent: #ed6a16; --ink: #111210; --muted: #60615d; background: #fff; color: var(--ink); }
.performance-site :is(section,footer) { scroll-margin-top: 90px; }
.performance-site :is(h1,h2,h3,h4) { font-family: 'Outfit',sans-serif; letter-spacing: -.045em; }
.performance-site section h2 { font-weight: 900; text-transform: uppercase; line-height: .98; }
.performance-site section h3 { font-weight: 800; line-height: 1.12; }
.performance-site .fluid-heading-lg { font-size: clamp(32px,4.5vw,64px); }
.performance-site .fluid-heading-xl { font-size: clamp(36px,5vw,72px); }
.performance-site .fluid-heading-md { font-size: clamp(22px,2.25vw,30px); }
.performance-site :is(.fluid-section,.fluid-section-tight,.fluid-section-loose) { padding-block: clamp(64px,7vw,104px); }
.performance-site :is(section,footer,#navbar) :is([class*="shadow"],.glass-card,.stat-card,.insight-card) { box-shadow: none !important; text-shadow: none; }
.performance-site :is(section,footer,#navbar) [class*="rounded"] { border-radius: 0; }
.performance-site :is(section,footer,#navbar) [class*="backdrop-blur"] { backdrop-filter: none; -webkit-backdrop-filter: none; }
.performance-site :is(section,footer) .design-glow { display: none; }
.performance-site :is(.text-brand-gold,.text-cyan,[class*="text-[#a27700]"],[class*="text-[#d4af37]"]) { color: var(--accent) !important; }
.performance-site .bg-clip-text { background: none !important; color: var(--accent) !important; -webkit-text-fill-color: currentColor; }
.performance-site :is(.bg-brand-gold,[class*="bg-[#a27700]"]) { background-color: var(--accent); }
.performance-site [class*="border-brand-gold"] { border-color: #ffffff2b; }
.performance-site .design-script { font-family: 'Caveat',cursive; font-size: clamp(38px,4.5vw,62px); line-height: 1; text-transform: none; font-weight: 600; letter-spacing: -.04em; color: var(--accent); transform: rotate(-6deg); margin-bottom: 10px; }
.performance-site :is(a[href="#cta"]:not(.hero-primary-cta):not(.hero-video-preview),button[type="submit"]) { border-radius: 0 !important; box-shadow: none !important; font-size: 12px; letter-spacing: .02em; }
.performance-site a[href="#cta"]:not(.hero-video-preview):not(.hero-primary-cta):not(.design-optin-preview) { background: var(--accent); color: #111; border: 1px solid var(--accent); font-weight: 900; }
.performance-site a[href="#cta"]:hover { filter: brightness(.95); }
.performance-site :is(a,button,input,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.performance-site .marker-badge { background: var(--accent); clip-path: none; transform: none; }
.performance-site #navbar { background: #111210f2 !important; border-bottom: 1px solid #ffffff25; padding-block: 16px; opacity: 1; transform: none; }
.performance-site #navbar > div > a > div:first-child { border: 1px solid #ffffff40; background: transparent; }
.performance-site #navbar .text-brand-gold { color: #ff852e !important; }
.performance-site #navbar nav { font-size: 12px; }
.performance-site #mobile-menu { top: 77px; background: #111; border-color: #555; }
.performance-site .design-light { background: #fff !important; color: var(--ink); border-color: #deded8; border-width: 0 0 1px; }
.performance-site .design-light :is([class*="text-white"],.text-brand-muted,[class*="text-slate-"]) { color: var(--muted); }
.performance-site .design-light :is(h2,h3,h4,strong) { color: var(--ink); }
.performance-site .design-light .text-brand-gold { color: #b54707 !important; }
.performance-site .design-light [class*="border-"] { border-color: #deded8; }
.performance-site .design-light [class*="bg-gradient"] { background-image: none; }
.performance-site .design-light :is(.insight-card,.stat-card,.design-audience-card) { background: #fff; border: 1px solid #deded8; }
.performance-site .design-light a[href="#cta"] { background: #111 !important; color: #fff !important; border-color: #111 !important; }
.performance-site .design-dark { background-color: #111210 !important; color: #fff; }
.performance-site .design-platforms { background: var(--accent) !important; padding-block: 15px; border: 0; }
.performance-site .design-platforms > .absolute,.performance-site .design-platforms .absolute { display: none; }
.performance-site .design-platforms > div:first-of-type { display: none; }
.performance-site .design-platforms > .max-w-7xl { display: none; }
.performance-site .design-platforms span { color: #111; font-size: 14px; font-weight: 900; opacity: 1; }
.performance-site .design-platforms .h-12 { height: 24px; }
.performance-site #story { padding-block: 80px; border-top: 0; }
.performance-site #story [class*="text-[12rem]"] { display: none; }
.performance-site #story [class*="rotate"] { transform: none !important; padding: 0; border: 0; margin-top: 0; }
.performance-site #story [class*="rotate"] img { aspect-ratio: 4/3; object-fit: cover; }
.performance-site #story [class*="rotate"] > div:last-child { padding: 16px; }
.performance-site #lifestyle { background: #f4f4ef !important; }
.performance-site #lifestyle .film-track > .absolute { display: none; }
.performance-site #lifestyle img { width: 100%; height: 100%; object-fit: cover; }
.performance-site #expertise { min-height: 0; overflow: hidden; padding-block: 88px; }
.performance-site #expertise > .absolute:last-child { display: none; }
.performance-site #expertise .group { margin-left: 0; background: #111210db; border: 0; border-top: 1px solid #ffffff40; padding: 24px 0; }
.performance-site #expertise h3 { color: #fff !important; }
.performance-site #expertise .fluid-kicker { display: none; }
.performance-site #expertise .text-brand-muted { color: #c7c7c2; }
.performance-site #framework { margin-top: 0; border-radius: 0; }
.performance-site #framework > .relative { margin-top: 0; }
.performance-site #framework .text-center:has(> h2) { margin-bottom: 48px; }
.performance-site #framework .text-center > p:first-child { border: 0; background: none; }
.performance-site .design-framework-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #deded8; }
.performance-site .design-framework-grid article { padding: 28px; border-right: 1px solid #deded8; }
.performance-site .design-framework-grid article:last-child { border-right: 0; }
.performance-site .design-framework-grid article > span { display: block; font: 700 46px/1 'Caveat',cursive; color: var(--accent); margin-bottom: 44px; }
.performance-site .design-framework-grid h3 { font-size: 23px; margin-bottom: 14px; }
.performance-site .design-framework-grid p { font-size: 14px; color: #60615d; line-height: 1.7; }
.performance-site #audience { background: #f5f5f1 !important; }
.performance-site .design-audience-card { transform: none !important; padding: 20px; }
.performance-site .design-audience-card > .absolute { display: none; }
.performance-site .design-audience-photo { width: 100%; height: auto; aspect-ratio: 5/3; margin-bottom: 24px; border: 0; }
.performance-site .design-audience-photo img { object-position: center 25%; }
.performance-site #audience .bg-red-950\/20 { background: #fff; }
.performance-site #cta { padding-top: 72px !important; padding-bottom: 0 !important; }
.performance-site #cta > .absolute { display: none; }
.performance-site .design-optin-box { margin-top: 0; padding: 40px; border: 1px solid #ffffff35; background: #111; }
.performance-site .design-optin-intro { display: grid; grid-template-columns: .7fr 1fr; align-items: center; gap: 40px; }
.performance-site .design-optin-preview { display: block; position: relative; }
.performance-site .design-optin-preview img { aspect-ratio: 3/2; width: 100%; object-fit: cover; }
.performance-site .design-optin-preview > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: #fff; background: #0002; }
.performance-site .design-optin-intro h2 { font-size: clamp(24px,2.5vw,36px) !important; letter-spacing: -.035em; color: #fff !important; }
.performance-site #cta button[type="submit"] { background: var(--accent) !important; color: #111; border-color: var(--accent); }
.performance-site #cta .film-track { background: #111; }
.performance-site #faq { background: #fff; color: #111; }
.performance-site #faq :is(h2,h3,[class*="text-white"]) { color: #111; }
.performance-site #faq p { color: #60615d; }
.performance-site #faq details { background: #fff; border: 0; border-bottom: 1px solid #d8d8d2; }
.performance-site #faq details[open] { border-left: 3px solid var(--accent); }
.performance-site footer { background: #111210; color: #fff; }
@media (max-width: 1023px) {
 .performance-site .design-framework-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .performance-site .design-framework-grid article { border-bottom: 1px solid #deded8; }
 .performance-site #expertise > .relative { margin-top: 38vw; }
}
@media (max-width: 767px) {
 .performance-site .design-framework-grid { grid-template-columns: 1fr; }
 .performance-site .design-framework-grid article { border-right: 0; padding: 24px; }
 .performance-site .design-framework-grid article > span { margin-bottom: 20px; }
 .performance-site .design-optin-box { padding: 20px; }
 .performance-site .design-optin-intro { grid-template-columns: 1fr; gap: 24px; }
 .performance-site #story { padding-block: 64px; }
 .performance-site .design-audience-photo { aspect-ratio: 2/1; }
}
@media (prefers-reduced-motion: reduce) {
 .performance-site *, .performance-site *::before, .performance-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .performance-site .fade-up { opacity: 1; transform: none; }
}

/* Maintain contrast on legacy utility-marked content. */
.performance-site :is(section,footer) { box-shadow: none !important; }
.performance-site [class*="drop-shadow"] { filter: none !important; }
.performance-site .design-light :is(h2,h3,h4) { color: #111210 !important; }
.performance-site .design-light [class*="bg-[#a27700]"] { background: #f4f4ef !important; }
.performance-site section h3 { letter-spacing: -.025em; }
.performance-site #faq .design-script { color: var(--accent); }
.performance-site #faq summary h3 { letter-spacing: -.015em; font-weight: 700; }
.performance-site #audience .h-1 { background: var(--accent); }

/* Introduction: transparent portrait, three milestones and a separate photo strip. */
.performance-site #epic-bio.bio-editorial { padding: clamp(64px,7vw,104px) 24px 64px; background: #f7f6f0; color: #171815; overflow: hidden; }
.bio-shell { max-width: 1232px; margin-inline: auto; }
.bio-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 32px 64px; align-items: start; }
.bio-heading { grid-column: 2; grid-row: 1; }
.performance-site .bio-heading .design-script { margin-bottom: 14px; }
.performance-site #bio-title { font-size: clamp(34px,3.7vw,54px); line-height: 1; margin: 0; }
#bio-title > span { color: #b54707; }
.bio-lead { margin: 24px 0 0; font-size: 16px; line-height: 1.75; color: #53554e; max-width: 580px; }
.bio-photo { grid-column: 1; grid-row: 1 / 3; margin: 30px 0 0; min-width: 0; align-self: center; }
.bio-photo-stage { position: relative; isolation: isolate; padding-top: clamp(40px,4.6vw,68px); }
.bio-photo-stage::before { content: ''; position: absolute; z-index: -1; width: 90%; aspect-ratio: 1; left: 0; top: 22%; border-radius: 50%; background: #eed6bc; }
.bio-photo-stage::after { content: ''; position: absolute; z-index: -1; inset: 18% 10% 12% 8%; border: 1px solid #bd5a202e; transform: rotate(-9deg); }
.bio-photo-word { position: absolute; top: 0; left: 2%; z-index: -1; font-family: 'Outfit',sans-serif; font-size: clamp(70px,9vw,130px); font-weight: 900; line-height: 1; letter-spacing: -.065em; color: #db5c13; }
.bio-photo-stage img { display: block; width: 100%; height: auto; }
.bio-photo-desktop { display: block; }
.bio-photo-mobile-wrapper { display: none !important; }
.bio-photo figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0 12px; border-top: 1px solid #c8c8bc; }
.bio-photo figcaption strong { font-family: 'Outfit',sans-serif; font-size: clamp(32px, 2.7vw, 36px); line-height: 1.15; font-weight: 800; letter-spacing: -.035em; color: #171815; }
.bio-photo figcaption > span { font-size: 13px; line-height: 1.5; color: #585a51; }
.bio-specialties { margin: 0; color: #686a61; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bio-specialties > span { color: #b54707; margin-inline: 8px; }
.bio-story { grid-column: 2; grid-row: 2; min-width: 0; }
.bio-timeline { list-style: none; padding: 0; margin: 0; }
.bio-timeline li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 18px; padding: 22px 0; border-top: 1px solid #d8d8cf; }
.bio-step { font-family: 'Caveat',cursive; font-size: 36px; color: #b54707; line-height: 1; }
.performance-site .bio-timeline h3 { font-size: 23px; margin: 0 0 10px; }
.bio-timeline p { margin: 0; font-size: 14px; line-height: 1.8; color: #53554e; }
.bio-takeaway { border-left: 2px solid #ed6a16; padding-left: 18px; margin: 8px 0 0 58px; font-size: 15px; line-height: 1.6; font-weight: 600; }
.bio-gallery-heading { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #cecec3; padding-top: 24px; margin: 64px 0 22px; }
.bio-gallery-heading p { font-weight: 800; font-size: 11px; letter-spacing: .08em; }
.bio-gallery-heading > span { font-size: 9px; letter-spacing: .08em; color: #63655c; }
.bio-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.bio-gallery figure { margin: 0; min-width: 0; }
.bio-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.bio-gallery figcaption { padding-top: 16px; }
.bio-gallery figcaption > span { font-weight: 800; font-size: 11px; letter-spacing: .05em; }
.bio-gallery figcaption p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #616358; }
.bio-action { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; }
.performance-site .bio-action a[href="#cta"] { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; padding: 18px 24px; background: #111210; color: #fff; border-color: #111210; text-decoration: none; }
.bio-action a > span { font-size: 20px; line-height: 1; }
.bio-action p { color: #616358; font-size: 12px; }
@media (max-width: 1023px) and (min-width: 768px) {
 .bio-layout { gap: 28px 32px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
 .bio-photo figcaption { flex-direction: column; gap: 4px; }
 .bio-photo { align-self: start; margin-top: 80px; }
 .bio-specialties { line-height: 1.7; }
}
@media (max-width: 767px) {
 .bio-layout { display: flex; flex-direction: column; gap: 28px; width: 100%; }
 .bio-heading { width: 100%; order: 1; }
 .performance-site #bio-title { font-size: clamp(32px,7.9vw,48px); line-height: 1.05; margin: 0; }
 .bio-lead { font-size: 14px; line-height: 1.7; margin-top: 18px; max-width: 100%; }
 .bio-photo { width: 100%; max-width: 430px; margin: 8px auto 0; order: 2; }
 .bio-photo-desktop { display: none !important; }
 /* Stage: kata BUILD. terlihat utuh di atas, kepala hanya menutupi bagian bawah huruf */
 .bio-photo-stage { padding-top: clamp(34px,10vw,48px); overflow: visible; }
 .bio-photo-stage::before { width: 88%; left: 6%; top: 22%; }
 .bio-photo-stage::after { inset: 22% 7% 8% 7%; transform: rotate(-5deg); border-color: #bd5a2040; }
 .bio-photo-word { top: 0; left: 0; font-size: clamp(64px,20vw,92px); letter-spacing: -.07em; }
 .bio-photo-mobile-wrapper { display: block !important; position: relative; width: 100%; }
 .bio-photo-mobile { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
 /* Caption */
 .bio-photo figcaption { flex-direction: column; gap: 6px; border-top: 1px solid #d9c9b3; margin-top: 26px; padding: 18px 0 8px; }
 .bio-photo figcaption strong { font-size: clamp(32px, 8.5vw, 36px); }
 .bio-photo figcaption > span { font-size: 12px; }
 .bio-specialties { font-size: 10px; line-height: 1.7; }
 .bio-story { width: 100%; order: 3; }
 .bio-timeline li { grid-template-columns: 30px minmax(0,1fr); gap: 14px; }
}
@media (max-width: 540px) {
 .bio-photo { max-width: none; }
 .bio-photo-stage { overflow: visible; }
 .bio-photo-mobile-wrapper { width: 100vw; margin-left: calc(50% - 50vw); }
 .bio-photo-stage::before { width: 84%; left: 8%; }
 .bio-photo figcaption { margin-top: 22px; }
 .performance-site .bio-timeline h3 { font-size: 21px; }
 .bio-takeaway { margin-left: 44px; font-size: 14px; }
 .bio-gallery-heading { margin-top: 40px; }
 .bio-gallery-heading > span { display: none; }
 .bio-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 14px; }
 .bio-action { flex-direction: column; gap: 14px; }
 .performance-site .bio-action a[href="#cta"] { width: 100%; }
}

/* Compact section spacing on mobile. */
@media (max-width: 767px) {
 .performance-site :is(.fluid-section,.fluid-section-tight,.fluid-section-loose),
 .performance-site #epic-bio.bio-editorial { padding-block: 48px; }
}