:root{--heading:'Poppins',Arial,sans-serif;--body:'Poppins',Arial,sans-serif}
body{font-weight:400;-webkit-font-smoothing:antialiased}
.wordmark{font-weight:800;letter-spacing:-1.7px}
.header nav a,.nav-contact{font-weight:600}
h2{font-weight:700;line-height:1.02;letter-spacing:-.055em;font-size:clamp(48px,6.2vw,88px)}
.identity-hero .hero h1{font-weight:800;font-size:clamp(90px,9vw,248px);line-height:.86;letter-spacing:-.035em}
.eyebrow,.tiny,.section-label{font-weight:500}
.intro,.cinema-on .about .intro{font-weight:300;letter-spacing:-.035em;font-size:clamp(21px,2vw,29px);line-height:1.5}
.body-copy,.service-list details>p,.process-steps p{font-weight:400;line-height:1.9}
.about h2{font-size:clamp(46px,5.65vw,81px);font-weight:700;line-height:1.03;letter-spacing:-.055em}
.profile-caption p{font-size:20px;font-weight:600;letter-spacing:-.035em}
.profile-caption>span:last-child{font-weight:400}
.tools p,.demo-note,.form-note,.wall-media-note,.contact-placeholder{font-weight:300}
.project-description h3,.cinema-on .work .project-description h3{font-weight:600;letter-spacing:-.025em}
.project-description p,.project-description>span{font-weight:400}
.cinema-on .work h2{font-size:clamp(44px,5vw,72px);line-height:1.02}
.section-heading>p,.graphic-heading>p,.editing-heading>div>p{font-weight:300}
.services h2{font-size:clamp(44px,4.55vw,66px);line-height:1.08;letter-spacing:-.05em}
.service-list h3{font-size:26px;font-weight:600;letter-spacing:-.04em}
.process-heading h2,.editing-heading h2,.graphic-heading h2{font-size:clamp(48px,6vw,86px);line-height:1.05}
.process-steps h3{font-size:22px;font-weight:600;letter-spacing:-.035em}
.contact h2,.cinema-on .contact h2{font-size:clamp(72px,9vw,139px);line-height:1.01;letter-spacing:-.065em;font-weight:700}
.contact-name{font-size:27px;font-weight:600;letter-spacing:-.035em}
.clock>span:not(.tiny){font-size:30px;font-weight:600;letter-spacing:-.055em}
.marquee>div,.cinema-on .marquee>div{font-size:18px;font-weight:600;letter-spacing:-.025em}
.work-counter{font-size:17px;font-weight:600}
.graphic-item-caption,.vertical-tile figcaption{font-weight:400}
.vertical-tile figcaption>span:first-child{font-size:12px;font-weight:600}
.brief-form label{font-weight:400}
.brief-form input,.brief-form textarea,.brief-form select{font-weight:300}
.brief-submit,.wall-playback,.graphic-reset,.dark-button{font-weight:600}
.dialog-bottom h2{font-weight:600}
.dialog-bottom p{font-weight:300}
@media(max-width:1100px){.about h2{font-size:5.7vw}.services h2{font-size:4.6vw}.service-list h3{font-size:24px}}
@media(max-width:760px){.identity-hero .hero h1{font-size:clamp(80px,25vw,165px);line-height:.9}.about h2{font-size:46px;line-height:1.05}.intro,.cinema-on .about .intro{font-size:22px;line-height:1.5}.body-copy{font-size:11px}.profile-caption p{font-size:16px}.profile-caption>span:last-child{font-size:6px}.cinema-on .work h2{font-size:42px}.cinema-on .work .section-heading>p{font-size:9px}.services h2{font-size:43px}.service-list h3{font-size:23px}.process-heading h2,.editing-heading h2,.graphic-heading h2{font-size:46px}.process-steps h3{font-size:21px}.contact h2,.cinema-on .contact h2{font-size:clamp(42px,10vw,74px);line-height:1.04}.contact-name{font-size:23px}.clock>span:not(.tiny){font-size:24px}.marquee>div,.cinema-on .marquee>div{font-size:15px}.vertical-tile figcaption>span:first-child{font-size:10px}}
@media(max-height:779px) and (min-width:761px){.cinema-on .work h2{font-size:43px}.cinema-on .work-stage{padding-top:82px;padding-bottom:32px}}
/* Animasi cukup menggunakan transform dan opacity */
.identity-hero .hero-copy,
.identity-hero .hero-portrait {
  will-change: transform, opacity;
}
.header, .header.scrolled {
  --header-gutter: clamp(20px, 2.92vw, 44px);
  height: 92px;
  padding: 0 var(--header-gutter);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 1px 3px #000b;
}
.header .wordmark { font-size: 28px; }
.header .nav-contact { display: none; }
.header nav:not(.open) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  gap: 26px;
}
.header nav:not(.open) :is([href="#editing"], [href="#graphics"], .menu-contact) { display: none; }
.header nav a {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: #f3f7ff;
}
.header nav a::after { display: none; }
.header nav a:hover { color: var(--ice); }
.header .menu-button {
  display: grid;
  gap: 5px;
  padding: 8px;
  margin-right: -8px;
}
.header .menu-button span {
  width: 29px;
  height: 4px;
  margin: 0;
  box-shadow: 0 1px 3px #0009;
}
.header nav.open {
  position: absolute;
  top: 76px;
  left: auto;
  right: var(--header-gutter);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 12px 22px;
  background: #0c1522f5;
  border: 1px solid var(--line);
}
.header nav.open a { font-size: 14px; padding: 7px 0; }
.hero-socials {
  position: absolute;
  left: clamp(20px, 2.92vw, 44px);
  bottom: 37px;
  display: flex;
  gap: 12px;
  z-index: 12;
}
.hero-socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #26282d;
  color: #fff;
}
.hero-socials a[href]:is(:hover, :focus-visible) { background: #416e8b; }
.hero-socials svg { width: 22px; height: 22px; }
.hero-time { display: none; }
.identity-hero .hero .hero-bottom { bottom: max(88px, 12%); }

@media (max-width: 760px) {
  .header, .header.scrolled { height: 72px; }
  .header .wordmark { font-size: 23px; }
  .header nav:not(.open) { display: none; }
  .header nav.open { top: 64px; }
  .hero-socials { bottom: 24px; }
}

:root {
  --bg: #191918;
  --ink: #fff;
  --ice: #e8d7b5;
  --blue: #b19a70;
  --muted: #bdb6a8;
  --line: #e8d7b52e;
  --paper: #fff;
  --paper-ink: #25231f;
}

body, .cinema-on .hero-curtain { background: var(--bg); }
.identity-hero .hero, .editing, .graphics, .services, .contact {
  background: var(--bg);
  color: var(--ink);
}
.identity-hero .hero h1 > .name-idle, .identity-hero .name-line:nth-child(2),
.identity-hero .hero .eyebrow, .contact h2 span { color: var(--ice); }
.light-panel, .cinema-on .about-stage { background: var(--paper); color: var(--paper-ink); }
.cinema-on .about .intro .reading-word { color: #6e6456; }
.cinema-on .about .intro .reading-word.read,
.light-panel .body-copy, .light-panel .process-steps p,
.light-panel .tools .tiny, .light-panel .tools p,
.light-panel .profile-caption > span:last-child { color: #51483a; }
.cinema-on .about .section-label > span:first-child,
.light-panel .section-label > span:first-child, .light-panel .process-steps article > span { color: #685331; }
.light-panel .tools > div > span { background: #f5ecdc; color: #685331; border-color: #68533140; }
.marquee, .cinema-on .marquee { background: #20201e; border-color: var(--line); }
.cinema-on .work-viewport::before {
  background: radial-gradient(ellipse at center, #bd9d5a30, transparent 70%);
}
.work .project[data-active="true"] .project-art { border-color: #e8d7b570; }
.header, .header.scrolled {
  --header-ink: #fff;
  color: var(--header-ink);
  text-shadow: none;
}
.header.on-light { --header-ink: #25231f; }
.header .wordmark, .header .wordmark span,
.header nav a, .header nav a.active, .header nav a:hover { color: var(--header-ink); }
.header .menu-button span { background: var(--header-ink); box-shadow: none; }
.header nav.open { background: #23221ff5; }
.header.on-light nav.open { background: #efe5d2fa; border-color: #51483a3d; }
.hero-socials a[href]:is(:hover, :focus-visible) { background: #665437; }

.experience { padding-block: clamp(80px, 10vw, 155px); }
.experience h2 {
  margin: 0 0 clamp(26px, 5vw, 70px);
  font-size: clamp(46px, 9vw, 145px);
  line-height: .94;
  color: #4c3b24;
}
.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 7vw, 100px);
}
.experience-grid > div { border-top: 1px solid #6853314d; padding-top: 14px; }
.experience-grid h3 { margin: 0 0 14px; font-size: 16px; }
.experience-grid p { margin: 0; font-size: 14px; line-height: 1.7; }
.header nav:not(.open) {
  isolation: isolate;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
}
.header nav:not(.open)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--pill-width, 0px);
  transform: translateX(var(--pill-x, 0px));
  border-radius: 99px;
  background: #e8d7b5;
  transition: transform 250ms ease, width 250ms ease;
}
.header nav:not(.open) a { padding: 8px 13px; }
.header nav a[data-current] { color: #25231f; }
.header nav.open a[data-current] {
  background: #e8d7b5;
  border-radius: 99px;
  padding-inline: 10px;
}
.experience-grid h3 { font-size: clamp(18px, 2vw, 23px); }
.experience-list, .experience-skills { padding: 0; margin: 0; list-style: none; }
.experience-list li {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-bottom: 1px solid #68533130;
}
.experience-list strong { font-size: clamp(17px, 1.7vw, 22px); }
.experience-list span, .experience-skills { font-size: clamp(15px, 1.35vw, 18px); }
.experience-list small { font-size: 13px; color: #685331; }
.experience-skills { display: grid; gap: 10px; line-height: 1.5; }

.header nav:not(.open) a { font-size: 18px; padding: 6px 11px; }
.header nav.open a { font-size: 13px; }
.hero .portrait-note, .hero .hero-bottom[hidden] { display: none; }
.about .profile-caption p { font-size: clamp(19px, 2vw, 26px); }
.about .profile-caption > span:last-child { font-size: clamp(9px, 1vw, 13px); }
.cinema-on .about .intro .reading-word {
  color: var(--paper-ink);
  opacity: .7;
  transition: opacity .2s ease;
}
.cinema-on .about .intro .reading-word.read { opacity: 1; font-weight: 700; }
.about-watermark, .experience-watermark {
  color: #68533112;
  white-space: nowrap;
  pointer-events: none;
}
.experience { isolation: isolate; }
.experience-watermark {
  position: absolute;
  right: -3%;
  bottom: -0.13em;
  z-index: -1;
  font: 800 clamp(70px, 15vw, 235px)/1 var(--heading);
  letter-spacing: -.07em;
  transform: translateX(var(--experience-shift, 0px));
}
.marquee, .cinema-on .marquee { padding-block: clamp(25px, 3vw, 46px); }
.marquee > div, .cinema-on .marquee > div { font-size: clamp(22px, 3.1vw, 44px); }

.about .section-label { display: none; }
.about .profile-caption { margin-top: 24px; max-width: none; }
.about .profile-caption p { margin-top: 0; }
.about .profile-caption > span:last-child { white-space: nowrap; }
.cinema-on .about .intro .reading-word { opacity: .3; }
.cinema-on .about .intro .reading-word.read { opacity: 1; font-weight: 600; }
.marquee, .cinema-on .marquee {
  height: auto;
  padding-block: clamp(16px, 2.3vw, 32px) clamp(22px, 2.8vw, 39px);
}
.marquee > div, .cinema-on .marquee > div {
  height: auto;
  font-size: clamp(20px, 2.8vw, 39px);
  line-height: 1.2;
  white-space: nowrap;
}
.creative-toolkit { margin-top: 32px; }
.toolkit-logos { display: flex; flex-wrap: wrap; gap: 12px; }
.toolkit-logo {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  width: 78px;
  padding: 0;
  background: transparent;
  color: var(--paper-ink);
  font-size: 11px;
  line-height: 1.3;
}
.toolkit-logo img {
  display: block;
  width: clamp(39px, 3.8vw, 54px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 9px;
  filter: saturate(0);
  transition: transform .24s ease-out, filter .24s ease-out;
}
.toolkit-logo:is(:hover, :focus-visible, :active) img {
  filter: saturate(1);
  transform: translateY(-3px) scale(1.17);
}
.toolkit-logo:focus-visible { outline: 2px solid #685331; outline-offset: 4px; }
.experience-list li:first-child { padding-top: 0; }
.experience-list li:first-child strong, .experience-grid h3 {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.35;
}
.marquee, .cinema-on .marquee {
  transform: rotate(-2deg) !important;
  margin: -8px 0 calc(1.75vw + 8px);
  padding-block: clamp(12px, 1.7vw, 24px) clamp(15px, 2vw, 28px);
}
.marquee > div, .cinema-on .marquee > div { font-size: clamp(18px, 2.5vw, 35px); }
.header { isolation: isolate; }
.header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -16px;
  pointer-events: none;
  background: #19191829;
  backdrop-filter: blur(10px);
  mask-image: linear-gradient(#000 15%, transparent 100%);
}
.header.on-light::before { background: #ffffff38; }

.about h2, .experience h2 {
  font-size: clamp(46px, 5.65vw, 81px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.055em;
  color: var(--paper-ink);
}
.about h2 span, .experience h2 span { color: #9c8053; }

@media (max-width: 1100px) {
  .about h2, .experience h2 { font-size: 5.7vw; }
}
@media (max-width: 760px) {
  .about h2, .experience h2 { font-size: 46px; line-height: 1.05; }
  .experience h2 span { display: inline-block; }
}

@media (max-width: 760px) {
  .about .about-layout > div:first-child { display: block; }
  .about .profile-caption { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-watermark { transform: none; }
}
.identity-hero .hero h1 > .name-idle { color: var(--ink); }
.identity-hero .hero .name-line:nth-child(2) { color: var(--ice); }

@media (max-width: 600px) {
  .experience-grid { grid-template-columns: 1fr; }
}